2

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

A   B
    C
    D

当div=A没有填满整个左列时，最后一个右 div ( div=D) 移动到下方div=A。视觉在这里http://jsfiddle.net/pedenski/rGhY3/

当 A 的内容不足以填满整个左列时，最后一个右边会div疯狂。

4

2 回答 2

1

你可以这样做......我所做的是制作了两个单独的容器，第一个向左浮动，第二个向右浮动，然后将所有三个容器都放在第二个容器中

演示

或者，如果您希望高度为 100%，您可以这样做

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>
于 2012-11-03T14:54:36.553 回答
0

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

于 2012-11-03T14:50:15.683 回答