放置3个HTML div； 1 左 2 右答案

【问题标题】：Place 3 HTML div; 1 left 2 right放置3个HTML div； 1 左 2 右
【发布时间】：2013-05-22 02:34:16
【问题描述】：

以下问题：

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

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

DIV1 DIV2
DIV1 DIV2
DIV1 DIV2

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

div 3 位于页面底部；

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

启

【问题讨论】：

使用css网格example
css 清除：左；浮动：对；在 div3 上
你能改变你的标记吗？

标签： css html

【解决方案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>

【讨论】：

【解决方案2】：

<div id="div4">

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

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

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

</div>

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

【讨论】：

【解决方案3】：

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

【讨论】：

谢谢，这有帮助。虽然我将浮动向右更改为向左浮动。

【解决方案4】：

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

【讨论】：

【解决方案5】：

试试这个 jfiddle，里面有 2 列浮点数和 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>

【讨论】：