2

我遇到了浮动 DIV 的问题。我想像这样定位四个 DIV：

在此处输入图像描述

我当前的代码：

<div style="width: 600px; margin: 0 auto;">
    <form>
        <div style="float: left; clear: left; width: 200px; height: 200px; background-color: lightpink;">div 1</div>

        <div style="float: right; clear: right; width: 200px; height: 300px; background-color: lightgreen;">div 2</div>

        <div style="float: right; clear: right; width: 100px; height: 200px; background-color: lightgrey;">div 4</div>
    </form>

    <form>
        <div style="float: left; clear: left; width: 200px; height: 100px; background-color: lightblue;">div 3</div>
    </form>
</div>

像这样定位它们：

在此处输入图像描述

JSFiddle：http: //jsfiddle.net/cLcwU/1/

如您所见，div 3 不会高于 div 4。

问题1：为什么会这样？

问题 #2：div 的 1、2 和 4 在一种形式中，而 div 3 在另一种形式中。因此，我不能在将 div 4 向右浮动之前将 div 3 向左浮动（无论出于何种原因都可以解决问题）。我怎样才能让它按照我想要的方式工作？

编辑：右下角的 div 2 应该是 div 4。抱歉。

4

2 回答 2

4

发生这种情况是因为您正在清除绿色 div 下方。之后的任何浮动元素都将（至少）低于该行，无论它们是向左还是向右浮动。

您可以将右侧的两个 div 放在您浮动的另一个 div 中。这意味着您不需要清除第二个 div，因此清除蓝色 div 会将其置于粉红色 div 下方：

<div style="width: 600px; margin: 0 auto;">
    <form>
        <div style="float: left; width: 200px; height: 200px; background-color: lightpink;">div 1</div>

        <div style="float:right">

            <div style="width: 200px; height: 300px; background-color: lightgreen;">div 2</div>

            <div style="width: 100px; height: 200px; background-color: lightgrey;">div 2</div>
        </div>
    </form>

    <form>
        <div style="float: left; clear: left; width: 200px; height: 100px; background-color: lightblue;">div 3</div>
    </form>
</div>

演示：http: //jsfiddle.net/4wKVr/

于 2013-08-31T20:14:49.750 回答
0

我尝试解决这个问题的方法是获取每对垂直的容器并将它们放在自己的容器 div 中。现在，这两个外部 div 可以左右浮动并清除，或者简单地将它们设为每个 width:50% 以便它们填充父级的宽度。然后将外部容器 divs csstext-align: right分别设置为 have 和 left。然后将内部的四个容器（每个外部两个）设置为display:block; 然后，它们将位于彼此下方，它们之间有一个微小的边缘；我认为是 15 像素。你可以用它来修复margin-top:-.938em;

于 2013-08-31T20:13:39.270 回答