Question

我一直在玩花车，我似乎无法弄清楚如何做这种布局。

A   B
    C
    D

当div=A没有填满整个左栏时，最后一个右侧div（div=D）会移到div=A以下。在这里视觉http://jsfiddle.net/pedenski/rGhY3/

当A的内容不足以填满整个左栏时，最后一个div行为疯狂。

Answer 1

你可以这样做......我所做的是两个独立的容器，第一个向左浮动，第二个向右浮动，只需将所有三个容器放在第二个容器中

Demo

或者，如果您希望高度为100％，则可以像this

那样进行

CSS

#container {
    width: 400px;
    margin:auto;   
    background:#ccc;
      overflow: hidden;

}
#head {
    width: 100%;
    height:30px;
    background:purple;

}
#content {
    width: 190px;
    background:pink;
    float:left;
    margin: 0 0 0 5px;
}

#content2 {
float: right;
}
#side1 {
    width:190px;
    background:red;
    margin:0 5px 10px 0;

}#side2 {
    width:190px;
    background:red;
    margin:0 5px 10px 0;

}
#side3 {
    width:190px;
    background:red;
    margin:0 5px 10px 0;
}

HTML

<div id="container">
   <div id="head">
    header
    </div>

        <div id="content">
            the quick brown fox
            the quick brown fox
            the quick brown fox
            the quick brown fox
            the quick brown fox
        </div>

       <div id="content2">
            <div id="side1">
            sidesidesideside
            sidesidesideside
            sidesidesideside
        </div>

    <div id="side2">
            sidesidesideside
            sidesidesideside
            sidesidesideside
        </div>

    <div id="side3">
            sidesidesideside
            sidesidesideside
            sidesidesideside
       </div>
    </div>
</div>

Answer 2

如果已知div B，C和D的高度，则将div A的高度设置为总和。如果他们的高度未知，你仍然可以用javascript动态设置它（没有javascript，它看起来很难看但仍然可用）。

当左div不足以填充左列时，堆栈右侧正确浮动

2 个答案: