Html 一行行的div覆盖。。。。示例：外部div是整个页面。。。其中有",；"；行div，每个行有2列。。。_Html_Image_Divider

Html 一行行的div覆盖。。。。示例：外部div是整个页面。。。其中有",；"；行div，每个行有2列。。。

html image

Html 一行行的div覆盖。。。。示例：外部div是整个页面。。。其中有",；"；行div，每个行有2列。。。,html,image,divider,Html,Image,Divider,正在尝试使多行div显示在外部div中。。。第一行很好，第二行叠加我做了两张图片，一张，test.png是一张绿色背景图片，400（宽）x840（高）。。。第二个是红色背景，360（宽）x756（高）。。。看来我不能上传了？我用红色做了第二个，这样我就可以知道它是否覆盖了。。。它正在覆盖第一列。。。我找不到相关文本/说明来告诉我如何执行此操作。。。divs left_promo和right_promo是“行”。。。当我为第二个“行”调用left_promo时，它覆盖了第一行left colu

正在尝试使多行div显示在外部div中。。。第一行很好，第二行叠加

我做了两张图片，一张，test.png是一张绿色背景图片，400（宽）x840（高）。。。第二个是红色背景，360（宽）x756（高）。。。看来我不能上传了？我用红色做了第二个，这样我就可以知道它是否覆盖了。。。它正在覆盖第一列。。。我找不到相关文本/说明来告诉我如何执行此操作。。。divs left_promo和right_promo是“行”。。。当我为第二个“行”调用left_promo时，它覆盖了第一行left column，并且不会从新的“行”边界开始。。。如果你需要这些图片，如果有人告诉我如何。。。看来我不能

  1) HTML code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <link rel="stylesheet" type="text/css" href="C:\GNO\css\newmain.css" />
<p>some text</p>
<div style="padding: 0 8px; height: 1100px; width: 1150px; overflow: auto;"> 
<div class="left_promo">
 <img src="C:\GNO\images\test.png">
</div>

 <div class="right_promo">

 <img src="C:\GNO\images\test.png">

  </div>

 <div class="left_promo">
 <img src="C:\GNO\images\red.png">
</div>  

  </div>
<!-- <div style="padding: 0 8px; height: 800px; width: 1150px; overflow: auto;"> 
 -->
<!--    </div>
 -->
</html>

  2) CSS code  
    @charset "utf-8";
/* CSS Document */
/* padding is top, right, bottom, left  */ 

div.left {
    background:#F7E2F1;
    height:1650px;
    width:200px;
    position:absolute;
    margin:10px 10px 10px 10px;
}
div.left_promo {
    height:450px;
    width:565px;
   position:absolute;
     margin:10px 10px 10px 10px;
}
div.right_promo {
    height:450px;
    width:565px;
   position:absolute; 
    margin:10px 10px 10px 620px;
}

div.right{
    background:#F7E2F1;
    height:1650px;
    width:650px;
    position:absolute;
    right:0px;
    margin:10px 440px 10px 10px;   /* the right offset margin pushes the content left   */
}

.container{
    background:#F7E2F1;
    height:1650px;  
    width:1550px;
    position:relative;
    margin:10px 10px 10px 10px;
}
.bottom{
    background:purple;
    height:150px;
    width:980px;
    margin:140px 10px 10px 10px;
}

1）HTML代码
一些文本
2） CSS代码
@字符集“utf-8”；
/*CSS文档*/
/*填充为上、右、下、左*/
左分区{
背景：#F7E2F1；
高度：1650px；
宽度：200px；
位置：绝对位置；
保证金：10px 10px 10px 10px；
}
左分区宣传片{
高度：450px；
宽度：565px；
位置：绝对位置；
保证金：10px 10px 10px 10px；
}
右分区宣传片{
高度：450px；
宽度：565px；
位置：绝对位置；
保证金：10px 10px 10px 620px；
}
右分区{
背景：#F7E2F1；
高度：1650px；
宽度：650px；
位置：绝对位置；
右：0px；
边距：10px 440px 10px 10px；/*右偏移边距将内容向左推*/
}
.集装箱{
背景：#F7E2F1；
高度：1650px；
宽度：1550px；
位置：相对位置；
保证金：10px 10px 10px 10px；
}
.底部{
背景：紫色；
高度：150像素；
宽度：980px；
保证金：140px 10px 10px 10px；
}

我对这个问题不是很了解。但要坚信这就是你想要的

这是小提琴。您只需要正确地关闭和打开一些标签

    <div style="padding: 0 8px; height: 1100px; width: 1150px; overflow: auto;"> 
       <div class="left_promo">
              <img src="http://3.bp.blogspot.com/-5WVRHaM3hGo/UrT2eNS11GI/AAAAAAAAUZo/W3YcLkt10z0/s1600/s4-mini-la-fleur-.jpg">
        </div>

        <div class="right_promo">
             <img src="https://m1.behance.net/rendition/modules/54304027/disp/b01a81ad9fac3f60ab871f18d8db2db9.jpg">
        </div>
    </div>
    <div style="padding: 0 8px; height: 1100px; width: 1150px; overflow: auto;"> 
        <div class="left_promo">
            <img src="http://3.bp.blogspot.com/-5WVRHaM3hGo/UrT2eNS11GI/AAAAAAAAUZo/W3YcLkt10z0/s1600/s4-mini-la-fleur-.jpg">
        </div>

        <div class="right_promo">
            <img src="https://m1.behance.net/rendition/modules/54304027/disp/b01a81ad9fac3f60ab871f18d8db2db9.jpg">
        </div>

    </div>