Question

以下问题：

我有3个div。

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

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

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

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

DIV1 DIV2
DIV1 DIV2
DIV1 DIV2

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

左边有一个div，右下有2个div。当我给前两个div一个浮点数时：左边看起来像这样：

DIV1 DIV2
DIV1 DIV2
DIV1 DIV2
DIV3
DIV3
DIV3

用“clear：left; float：right;”在第三个div我得到这个：

DIV1 DIV2
DIV1 DIV2
DIV1 DIV2

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

div 3位于页面底部;

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

启

Answer 1

Working jsFiddle Demo

更改标记。将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%;
}

Answer 2

试试这个jsfiddle，其中2列包含float和div http://jsfiddle.net/AnFPa/1/

<div style="float: left;">
    <div>div1</div>
</div>
<div style="float: left;">
<div>div2</div>
<div>div3</div>
</div>

Answer 3

尝试使用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>

Answer 4

<div id="div4">

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

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

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

</div>

给div 4一个宽度并将div 3右移。

Answer 5

<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>

放置3个HTML div; 1左2右

5 个答案: