2013-06-24 4 views
0

Как я могу заняться пространством между группой разнесенных по высоте вертикально, так что промежуток между ними постоянно один и тот же? Ширины div фиксированы. Высота будет различной. Количество divs будет меняться. Вот JsFiddle Example. Есть ли способ установить marginTop для отрицательного значения динамически с помощью javascript до тех пор, пока не будут выполнены требуемые пробелы?Как переместить горизонтальный поток divs на страницу

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> 

ответ

2

Вот утра статья может помочь вам: http://designshack.net/articles/css/masonry/

+0

Только то, что я собирался предложить, тоже. Это отличная работа. Хотя имейте в виду, что у вас все еще есть пробелы. –

+0

У меня есть кирпичная кладка, чтобы работать, следуя этому [пример] (http://osvaldas.info/responsive-jquery-masonry-or-pinterest-style-layout) Спасибо – TroyS

Смежные вопросы