Question

我正在使用浮动的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

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

即

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

填充区域使用浮动元素

5 个答案: