div 向左浮动：长 div 清除？答案

【问题标题】：Div float left: Long divs clearing?div 向左浮动：长 div 清除？
【发布时间】：2012-06-21 04:44:05
【问题描述】：

问题是我希望橙色 DIV 的底行出现在绿色 DIV 所在的位置。看起来右边的长 div 正在向左清除？

所有 DIVS 都向左浮动，它们需要向左浮动（向右浮动会将它们发送到页面的另一侧）。

HTML：

<div class="small"></div>
<div class="small"></div>
<div class="small"></div>
<div class="small"></div>
<div class="long"></div>
<div class="small"></div>
<div class="small"></div>
<div class="small"></div>
<div class="small"></div>

CSS：

.small
{
  width: 200px;
  height: 200px;
  float: left;
}
.large
{
  width: 200px;
  height: 450px;
  float: left;
}

谢谢！

【问题讨论】：

任何代码？找到一个起点，看看到目前为止你做了什么？
你能把你试过的代码发布到像jsfiddle.com这样的网站上
你能用 css 区分过高的橙色 div 和其他 div 吗？如果是的话，我会用这样的东西把他从浮动中移除：#longDiv {position:absolut;right:0px}
@Qtax：实际上没有，是这个……
添加了代码。它们在我看来是黄色的，但我的帖子已被编辑，所以我猜这很酷：S

标签： css html css-float

【解决方案1】：

HTML：

    <div id="wrapper">
    <div class="orange"></div>
    <div class="orange"></div>
    <div class="orange"></div>
    <div class="orange"></div>

    <div class="orange"></div>
    <div class="orange"></div>
    <div class="orange"></div>
    <div class="orange"></div>

    <div class="green"></div>
    <div class="green"></div>
    <div class="green"></div>
    <div class="green"></div>
</div>
<div class="talldiv"></div>

CSS：

#wrapper {
    /*width should be the total of all the small boxes widths and margins */
    width: 241px;
    float:left;
}

#wrapper div {
    /*all of my divs look like this*/
    margin: 0 4px 4px 0;
    width: 50px;
    height: 50px;
    border: 3px solid black;
    float:left;
}

.orange {
    background: orange;
}

.green {
    background: #a4e837;
}

.talldiv {
    /*i go outside the wrapper div*/
    height: 100px;
    width: 50px;
    border: 3px solid black;
    background: red;
    float:left;
}

【讨论】：

谢谢，小盒子创意的容器效果很好！ :)

【解决方案2】：

您可以为所有小盒子制作一个 div 容器，然后在该容器之后放置您的大盒子。

<div> // big box
  <div> // small box
  </div>
  <div> // small box
  </div>
  <div> // small box
  </div>
</div> // end big box
<div> // long box
</div>

此代码适用于我： http://codepaste.net/gr59ax

【讨论】：

谢谢，小盒子创意的容器效果很好！ :)

【解决方案3】：

您可以将所有正方形 div 封装在另一个 div 中，该 div 也将在 float:left 中：

<div class="group">
    <div class="line">
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
    </div>
    <div class="line">
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
    </div>
</div>
<div class="rect"></div>

使用 CSS：

div.square {
    background-color: orange;
    width: 100px;
    height: 100px;
    float: left;
    margin: 10px;
    border: 3px solid black;
}

div.rect {
    background-color: orange;
    width: 100px;
    height: 226px;
    float: left;
    margin: 10px;
    border: 3px solid black;
}

div.group {
    float: left;   
}

结果是：http://jsfiddle.net/4sTPq/

【讨论】：

谢谢，小盒子创意的容器效果很好！ :)

【解决方案4】：

试试这个小提琴：http://jsfiddle.net/xPGmR/

如您所见，我并没有对 css 代码进行太多更改：我使用了 nth-child 伪类，这个特定的解决方案要求大块始终是包装器内的第五个索引。

我没有更改 float 并且块与您的示例相同：我刚刚将大块绝对定位在相对定位的包装器内

请注意，IE9+ https://developer.mozilla.org/en/CSS/:nth-child 支持 nth-child，但是，如果您需要更广泛的交叉浏览，也许您可以用一些涉及相邻兄弟选择器的复杂选择器替换该选择器（或更改标记）

【讨论】：

谢谢，小盒子创意的容器效果很好！ :)