html - 使用浮动元素填充区域

Question

我正在使用带有 float:left 的 DIV

当 DIV 2 增加大小时

我们得到这样的东西：

+---+ +----+
| 1 | |    |
+---+ |    |
      |  2 |
      |    |
      |    |
      +----+
+---+
| 3 |
+---+

有没有办法实现这一点：

+---+ +----+
| 1 | |    |
+---+ |    |
+---+ |  2 |
| 3 | |    |
+---+ |    |
      +----+

无需求助于jquery？

Answer 1

您可以为此使用纯 CSS3 :nth-child属性。像这样写：

.innerdiv:nth-child(even){
    float:right;
    border-color:red;
}

检查这个http://jsfiddle.net/RsYgR/1/

Answer 2

<div class="left" style="float: left;">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    .......
    <div class="boxN"></div>
</div>
<div class="right" style="float: right;"></div>

这适用于任意数量的框，就像左边有两列会在高度上伸展，右边也会伸展。

这是实际代码：http: //jsfiddle.net/SVbyj/

Answer 3

所以这是我想出的最佳解决方案：

for (var i = 0; i < box.length; i++) {  //json array with box info
    createHTML.box(i);  //creates boxes with id="#box_"+i
    if(isEven(i))
        $("#box_"+i).css( "float","right" );
    else
        $("#box_"+i).css( "float","left" );
}   

是偶函数

 function isEven(n) 
 {
     return (n % 2 == 0);
 }

我知道我需要一些 jquery ..

完美运行

Answer 4

如果您将它们包装在一个 div 中，那么它应该可以工作。

  <div id="bothleftnright"> 
     <div id="float-left" style="float:left;"></div>
     <div id="float-left2" style="float:left;"></div>
     <div id="float-right" style-"float:right;"></div>
  </div>

只要外部 div 的高度适合所有 3 个 div，它就应该解决这个问题。

不知道为什么投反对票，请发表评论

Answer 5

只需将您的两个左侧框放在一个列中，该列浮动到右侧列的左侧。

IE

<div class="column1" style="float:left;">
<div  class="box1">
    Here is box 1
</div>
<div  class="box3">
    Here is box 3
</div>
</div>
<div class="column2" style="float:right;">
    <div  class="box2">
        Here is box 2
    </div>
</div>