使用純CSS的兩列布局

Question

在更大的固定寬度兩列塊內有塊名爲a，b，c，d的塊。

我想ð左c和下方，可以使用純CSS來完成呢？

我都試過了，

CSS：

.wrapper { 
    border: 1px dotted #111; 
    width: 360px; 
    padding: 20px; 
    float: left; 
} 

.rectangle { 
    display: inline-block; 
    float: left; 
    border: 1px solid #333; 
    min-height: 100px; 
    width: 178px; 
} 

#a { 
    height: 248px; 
} 

#b { 
    height: 148px; 
} 

#c { 
    height: 198px; 
} 

#d { 
    height: 98px; 
} 

HTML：

<div class="wrapper"> 
<div id="a" class="rectangle">a</div> 
<div id="b" class="rectangle">b</div> 
<div id="c" class="rectangle">c</div> 
<div id="d" class="rectangle">d</div> 
</div>​ 

http://jsfiddle.net/imom0/E7GYR/1/

爲了簡單起見，我不喜歡使用JavaScript或masonry。

Answer 1

可以使用column-count CSS屬性是這樣的：

.wrapper { 
    border: 1px dotted #111; 
    width: 460px; 
    padding: 20px; 
    float: left; 
    column-count:2; 
} 

.rectangle { 
    display: inline-block; 
    border: 1px solid #333; 
    min-height: 100px; 
    width: 170px; 
} 

和調整你的HTML：

<div class="wrapper"> 
<div id="a" class="rectangle">a</div> 
<div id="d" class="rectangle">d</div> 
<div id="b" class="rectangle">b</div> 
<div id="c" class="rectangle">c</div> 
</div> 

column-count支持與大多數瀏覽器相應的供應商前綴。有關更多信息，請參見caniuse。

An example fiddle can be found here.

Answer 2

嘗試有正確的div 浮動權：http://jsfiddle.net/E7GYR/7/

---

HTML：

<div class="wrapper"> 
<div id="a" class="rectangle left">a</div> 
<div id="b" class="rectangle right">b</div> 
<div id="c" class="rectangle right">c</div> 
<div id="d" class="rectangle left">d</div> 
</div>​ 

CSS：

.wrapper { 
    border: 1px dotted #111; 
    width: 360px; 
    padding: 20px; 
    float: left; 
} 

.rectangle { 
    display: inline-block; 
    border: 1px solid #333; 
    min-height: 100px; 
    width: 178px; 
} 

.left 
{ 
    float:left;  
} 

.right 
{ 
    float:right 
} 

#a { 
    height: 248px; 
} 

#b { 
    height: 148px; 
} 

#c { 
    height: 198px; 
} 

#d { 
    height: 98px; 
} 
​