css - 放置 3 个 HTML div； 1左2右

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 一个 float: left 时，它看起来像这样:

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%;
}