多列像CSS佈局

Question

我正在尋找像下面的鏈接中描繪的多列CSS佈局。

http://i.imgur.com/Fhdyi.png

這裏是語法我在尋找......那種

<div class="container"> 
    <div id="1">#1</div> 
    <div id="2">#2</div> 
    <div id="3">#3</div> 
    <!-- and so on... --> 
</div> 

我在尋找什麼樣的CSS屬性的應用到這些編號的DIV，讓他們顯示這個樣子？ DIV的高度是可變的，但寬度是固定的。

非常感謝！

Answer 1

只用CSS就不能很好地完成，只能用CSS3完成。

要回答張貼你的問題，這是一個例子：http://sickdesigner.com/masonry-css-getting-awesome-with-css3/

div{ 
-moz-column-count: 3; 
-moz-column-gap: 10px; 
-webkit-column-count: 3; 
-webkit-column-gap: 10px; 
column-count: 3; 
column-gap: 10px; 
width: 480px; } 

div a{ 
    display: inline-block; /* Display inline-block, and absolutely NO FLOATS! */ 
    margin-bottom: 20px; 
    width: 100%; } 

<div> 
<a href="#">Whatever stuff you want to put in here.</a> 
<a href="#">Whatever stuff you want to put in here.</a> 
<a href="#">Whatever stuff you want to put in here.</a> 
...and so on and so forth ad nauseum. 
</div> 

與問題是，如果你有很多的項目，你首先看到的每一列的頂部而不是前三項。

jQuery的砌體插件正是這種佈局的一個更好的選擇：http://masonry.desandro.com/

還有一個簡單的JS版本，被稱爲「香草磚石」 http://vanilla-masonry.desandro.com/

這樣，你的第一個項目是在頂部，它看起來更好。

Answer 2

這不是測試，但可能它是這樣的，你正在尋找：

#1{ 
    height:150px; 
    width:200px; 
    border: 1px, solid, black; 
    background-color:black; 
    color:white; 
    float:left; 
} 

#2{ 
    height:200px; 
    width:200px; 
    border: 1px, solid, black; 
    background-color:black; 
    color:white; 
    float:left; 

} 

#3{ 
    height:500px; 
    width:200px; 
    border: 1px, solid, black; 
    background-color:black; 
    color:white; 
    clear:both; 

} 

#4{ 
    height:50px; 
    width:200px; 
    border: 1px, solid, black; 
    background-color:black; 
    color:white; 
    float:left; 
} 


#5{ 
    height:100px; 
    width:200px; 
    border: 1px, solid, black; 
    background-color:black; 
    color:white; 
    float:left; 

} 


#6{ 
    height:200px; 
    width:200px; 
    border: 1px, solid, black; 
    background-color:black; 
    color:white; 
    float:left; 
} 


#7{ 
    height:500px; 
    width:200px; 
    border: 1px, solid, black; 
    background-color:black; 
    color:white; 
    clear:left; 
} 

Answer 3

如何在列分離的div？事情是這樣的：

.container #col1,#col2,#col3,#col4{ 
float:left; 
} 
.container #div1,#div2,#div3,#div4,#div5,#div6,#div7{ 
width:150px; 
background:#000; 
margin:0 20px 10px 0; 
padding:10px; 
color:#fff; 
} 

---

<div class="container"> 
<div id="col1"> 
    <div id="div1">#1</div> 
    <div id="div2">#2</div> 
</div> 
<div id="col2"> 
    <div id="div3">#3</div> 
</div> 
<div id="col3"> 
    <div id="div4">#4</div> 
    <div id="div5">#5</div> 
    <div id="div6">#6</div> 
</div> 
<div id="col4"> 
<div id="div7">#7</div> 
</div> 
</div>