Question

我有4个div

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

我需要按照“方形”顺序对齐它们： divs order

我试过漂浮 - 只留下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％），因为4px边距和1px边框占用空间。

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

我假装height: 0;＆amp; padding-bottom: 50% - 除此之外 - 浮动部分应该清晰。这是a jsFiddle too。我也没有为盒子大小添加前缀... - 你可以google它。祝你好运！

HTML

<div class="block one">1</div>
<div class="block two">2</div>
<div class="block three">3</div>
<div class="block four">4</div>

CSS

* {
    box-sizing: border-box;
}

body {
    margin: 0;
}

.block {
    width: 50%;
    float: left;
    height: 0;
    padding-bottom: 50%;
}

.one {
    background: yellow;
}

.two {
    background: lightblue;
}

.three {
    background: orange;
}

.four {
    background: red;
}

Answer 4

简单明确的浮动是否有效？此HTML似乎可以执行您想要的操作：

<html>
<style>
    div {
        float: left;
        width: 100px;
        height: 100px;
        border: 1px solid blue;
        margin: 8px;
    }
    #third {
        clear: left;
    }
</style>
<body>
<div id="first">1</div>
<div id="second">2</div>
<div id="third">3</div>
<div id="fourth">4</div>
</body>
</html>

Answer 5

它实际上是基于四个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/

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

5 个答案:

HTML

CSS