如何在頁面上重新堆疊div的水平流

Question

我如何垂直占據一組多高度div之間的空間，這樣它們之間的間隙是一致的？ div寬度是固定的。 高度會有所不同。 div的數量會有所不同。 這是一個JsFiddle示例。 有沒有辦法用javascript動態設置marginTop為負值，直到滿足所需的差距？

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>

Answer 1

這篇文章可能對你有幫助： http ： //designshack.net/articles/css/masonry/

如何在頁面上重新堆疊div的水平流

問題描述

1 個解決方案

解決方案1
2 已采納 2013-06-24 16:44:19

如何在頁面上重新堆疊div的水平流

問題描述

1 個解決方案

解決方案1 2 已采納 2013-06-24 16:44:19

解決方案1
2 已采納 2013-06-24 16:44:19