Question

DIV Float

问题在于我希望底行的橙色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;
}

谢谢！

Answer 1

你可以为所有的小盒子制作一个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

Answer 2

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

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

Answer 4

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

正如你所看到的，我没有改变css代码：我使用了nth-child伪类，这个特定的解决方案要求大块将始终是你的包装器中的第五个索引。

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

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

Div浮动左：Long divs清除？

4 个答案: