不同高度的棧div

Question

我想在不同高度的div上堆疊同一寬度的div，從上到下往右走。

問題現在是與短divs ..給上面的div一個醜陋的差距。

我添加了一個小的草圖與我想做的事..從挪威

謝謝！

Answer 1

我想你是在你的網站使用jQuery。從草圖中，我建議看看名爲Masonry的jQuery插件。

Answer 2

看一看使用CSS列

這裏的W3C spec，但稍微容易讀可能是PPK's write up。

Answer 3

CSS：

.column { width:20em; float:left } 
.column div { background:red; margin:1em } 

HTML：

<div class="column"> 
    <div></div> 
    <div></div> 
    <div></div> 
</div> 
<div class="column"> 
    <div></div> 
    <div></div> 
    <div></div> 
</div> 
<div class="column"> 
    <div></div> 
    <div></div> 
    <div></div> 
</div> 

Answer 4

在容器div中使用三列div。每個都漂浮着。 在頂部和底部添加一個空格，並清空雙方。

.column { float：left;寬度：無論你想要它， margin-left：無論你想要它， }

.clear { clear：both; height：0px; }

.column div {margin} bottom：無論你想要它，寬度：無論你想要它， }

 <div id='container'> 

<div class='clear'>&nbsp;</div> 

    <div class='column'> 
<div>blah blah blah</div><div>blah blah blah</div>... etc 
    </div> 

    <div class='column'> 
<div>blah blah blah</div><div>blah blah blah</div>... etc 
    </div> 

    <div class='column'> 
<div>blah blah blah</div><div>blah blah blah</div>... etc 
    </div> 

<div class='clear'>&nbsp;</div> 

     </div>