css以正方形顺序浮动4个div(float-left只有2°和4°不起作用)

Question

我有4个div

<div id="first"></div>
<div id="second"></div>
<div id="third"></div>
<div id="fourth"></div>

我需要以"正方形"顺序对齐它们:

我试过漂浮 - 只留下2°div和4°div,但它不起作用.

不幸的是,我无法使用
具有已定义宽度的容器,并且所有div都是左浮动的

<div id="container" style="width: 250px">
  <div id="first"  style="float: left"></div>
  <div id="second" style="float: left"></div>
  <div id="third"  style="float: left"></div>
  <div id="fourth" style="float: left"></div>
</div>

或者在我的实际项目中定位绝对/相对左,顶等...

所以我希望有一些浮动技巧来解决我的问题..

Answer 1

<style>
    .divSquare{
        width:48%; height:200px; margin:4px; border:1px solid black; float: left
    }
</style>    

<div class="divSquare">1</div>
<div class="divSquare">2</div>
<div style='clear:both'></div>
<div class="divSquare">3</div>
<div class="divSquare">4</div>

我想你可以明确定义的高度,你CAN设置一个百分比宽度.所述divSquare的宽度被设定为48%(小于50%),因为4像素余量和像素边框占据房间任一.

JSFiddle看到这个在行动.

Answer 2

你尝试过使用clear吗？检查此示例:

<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
<div id="d"></div>

div { height: 100px; float: left; width: 100px; }
#a { background: blue; }
#b { background: red; }
#c { background: green; clear: left; }
#d { background: black; }

http://jsfiddle.net/T5X9A/

Answer 3

它实际上是基于四个 div 的宽度。容器的宽度为 250px，因此如果前两个 div 的宽度为 125px，那么它们将填满第一行，并将所有剩余的 div 向下推。如果 div 的宽度均为 50%，则具有相同的效果。如果 div 的宽度小于 33.3333%，则至少三个 div 将堆积在第一行中。向左浮动允许框并排移动，直到达到父级的宽度限制。您可以通过以下方式控制宽度：

#container > div {
    width: 50%;
}

或者您可以每隔三个 div 清除一次浮动。

#container > div:nth-of-type(3n + 3) {
    clear: both;
}

http://jsfiddle.net/3ssKK/1/