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 に答える