Question

如何垂直占据一组多高度div之间的空间，以使它们之间的间隙始终相同？ div宽度是固定的。高度会有所不同。 div的数量会有所不同。这是一个JsFiddle Example。有没有办法用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 个答案: