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>

我需要以“正方形”順序對齊它們： 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>

我想你可以明確定義的高度，你可以設置一個百分比寬度。 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;的正方形height: 0; ＆ padding-bottom: 50% - 但除此之外 - 浮動部分應該是清晰的。 這里也是一個jsFiddle 。 我也沒有為盒子大小添加前綴... - 你可以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 個解決方案

解決方案1
13 2014-07-27 03:36:46

解決方案2
7 2014-07-27 03:31:45

解決方案3
2 2014-07-27 03:58:19

HTML

CSS

解決方案4
1 2014-07-27 03:32:56

解決方案5
0 2014-07-27 03:29:28

css以正方形順序浮動4個div（float-left只有2°和4°不起作用）

問題描述

5 個解決方案

解決方案1 13 2014-07-27 03:36:46

解決方案2 7 2014-07-27 03:31:45

解決方案3 2 2014-07-27 03:58:19

HTML

CSS

解決方案4 1 2014-07-27 03:32:56

解決方案5 0 2014-07-27 03:29:28

解決方案1
13 2014-07-27 03:36:46

解決方案2
7 2014-07-27 03:31:45

解決方案3
2 2014-07-27 03:58:19

解決方案4
1 2014-07-27 03:32:56

解決方案5
0 2014-07-27 03:29:28