Question

Thas是我想要完成的布局，有点，我遇到麻烦有两个列，但第一个长于第二个，并将它们放在白色div中。

所以..

div1：只是一个具有自动高度和黑色bg的div div2：与div1相同但是白色bg
div3和div4也是具有自动高度的div，并且在某些点div 4处的灰色bg可能比div 3长或反过来，这些列的高度可以增加，因此div1和div2应该伸展
div5-8只是图像。

我能够得到这个div的定位，但是它们不会留在白色div中（当我向左浮动div 3时）他们出现就像div 3在白色和黑色div上面一样，如果我做得更久它会比div1和2延伸更多

或者我也可以将它们全部放在白色div中，但是没有浮动div4但没有帮助= /

我知道必须有一些定位问题，但我尝试了一些组合而且它们不会工作，此时我没有使用任何位置相对或任何东西。

帮助表示赞赏。

Answer 1

转到960 Grid System。您应该能够使用该960框架在几分钟内完成上述模型。

Answer 2

div3和div4需要float ed ...

div5 - div8需要clear:both;

    <style>
      div                          { overflow:hidden; }
      div.3, div.4                 { float:left; }
      div.5, div.6, div.7, div.8   { clear:both; }

    </style>
    <div class="1">
      <div class="2">
        <div class="3"></div>
        <div class="4"></div>
        <div class="5"></div>
        <div class="6"></div>
        <div class="7"></div>
        <div class="8"></div>
      </div>
    </div>

这是它的主旨，你填写其余的......

css两列布局问题

2 个答案: