首页 文章

Div浮动左：Long divs清除？

提问于
浏览 次
0

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

谢谢！

css html css-float

4 回答

  • 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;
}
    回复于
  • 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

    回复于
  • 1

    您可以将所有正方形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/

    回复于
  • 1

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

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

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

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

    回复于

相关问题