0

如何垂直占用一组多高度 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>
4

1 回答 1

2

这是一篇可能对您有所帮助的文章：http: //designshack.net/articles/css/masonry/

于 2013-06-24T16:44:19.427 回答