2

以下问题：

我有 3 个 div。

<div id="div1"> </div>

<div id="div2"> </div>

<div id="div3"> </div>

我想按以下顺序放置它们：

DIV1 DIV2
DIV1 DIV2
DIV1 DIV2

........DIV3
........DIV3
........DIV3

左边 1 个 div，下面右边 2 个 div。当我给前两个 div 一个 float: left 时，它看起来像这样：

DIV1 DIV2
DIV1 DIV2
DIV1 DIV2
DIV3
DIV3
DIV3

用“清除：左；浮动：右；” 在第三个 div 我得到这个：

DIV1 DIV2
DIV1 DIV2
DIV1 DIV2



...................... DIV3
...... ................................DIV3
.................................. ...................DIV3

div 3 位于页面底部；

如何将最后一个 div 放在第二个下面？

凯

4

5 回答 5

4

工作 jsFiddle 演示

更改您的标记。添加div1到一个元素，然后div2添加到另一个元素div3：

<div class="left">
    <div id="div1">
        <p>DIV 1</p>
        <p>DIV 1</p>
        <p>DIV 1</p>
        <p>DIV 1</p>
    </div>
</div>

<div class="right">
    <div id="div2">
        <p>DIV 2</p>
        <p>DIV 2</p>
        <p>DIV 2</p>
        <p>DIV 2</p>
    </div>
    <div id="div3">
        <p>DIV 3</p>
        <p>DIV 3</p>
        <p>DIV 3</p>
        <p>DIV 3</p>
    </div>
</div>

然后左右浮动：

.left {
    float: left;
    width: 50%;
}

.right {
    float: right;
    width: 50%;
}
于 2013-05-27T09:18:20.990 回答
2

试试这个 jfiddle, 2 列有浮点数和 divs http://jsfiddle.net/AnFPa/1/

<div style="float: left;">
    <div>div1</div>
</div>
<div style="float: left;">
<div>div2</div>
<div>div3</div>
</div>
于 2013-05-27T09:26:37.637 回答
1

尝试使用 clear left ：

<div 3 style="clear:left" ></div>

或者您可以将两个 div 放在一个容器中并将底行向右浮动：

<div>
  <div id="1" style="float:left"></div>
  <div id="2" style="float:left"></div>
  <div style="clear:both"></div>
  <div id="3" style="float:right"></div>
</div>
于 2013-05-27T09:09:00.267 回答
1 
<div id="div4">

<div id="div1"> </div>

<div id="div2"> </div>

<div id="div3"> </div>

</div>

给 div 4 一个宽度并让 div 3 向右浮动。

于 2013-05-27T09:09:09.817 回答
0 
<html>
<body>
    <div style="height: 100px; Width: 200px;"> <!-- Container -->
        <div style="float:left; height: 50px; Width:100px; background-color:red;">
        </div>
        <div style="float:left; height: 50px; Width:100px; background-color:blue;">
        </div>
        <div style="float:right; height: 50px; Width:100px; background-color:green;">
        </div>
    </div>
</body>
</html>
于 2013-05-27T09:18:27.550 回答