如何在頁面上重新打開div的水平流動

我該如何佔用一組垂直多高度div之間的空間，使它們之間的間隙保持一致？ div寬度是固定的。高度會有所不同。 div的數量會有所不同。這是一個JsFiddle Example。有沒有辦法使用javascript動態地將marginTop設置爲負值，直到滿足所需的間隔？如何在頁面上重新打開div的水平流動

body { 
background-color: #AFC2EB; 
padding: 10px; 
} 

body .section { 
border: 2px solid #0000CC; 
margin: 5px; 
background-color: #CCCCCC; 
border-radius: 5px; 
width: 150px; 
float: left; 
} 

<body> 
<form id="form1" runat="server"> 
    <div id="parent_div" style="width: 500px;"> 
     <div id="div1" style="height: 200px;" class="section"></div> 
     <div id="div2" style="height: 100px;" class="section"></div> 
     <div id="div3" style="height: 50px;" class="section"></div> 
     <div id="div4" style="height: 200px;" class="section"></div> 
     <div id="div5" style="height: 100px;" class="section"></div> 
     <div id="div6" style="height: 50px;" class="section"></div> 
     <div id="div7" style="height: 100px;" class="section"></div> 
     <div id="div8" style="height: 200px;" class="section"></div> 
     <div id="div9" style="height: 50px;" class="section"></div> 
     <div id="div10" style="height: 100px;" class="section"></div> 
     <div id="div11" style="height: 100px;" class="section"></div> 
    </div> 
</form> 
</body>

來源

2013-06-24 TroyS

這裏的上午文章可以幫助你：http://designshack.net/articles/css/masonry/

來源

2013-06-24 16:44:19

正是我要建議了。它做得很好。雖然請注意，你可能還有一些差距。 –

我通過下面這個[示例]得到了砌體工作（http://osvaldas.info/responsive-jquery-masonry-or-pinterest-style-layout）謝謝 – TroyS

如何在頁面上重新打開div的水平流動

回答

相關問題