css multi column выпуск

Question

не могли бы вы помочь мне с некоторой магией css.

Я пытаюсь создать гибкую структуру нескольких столбцов. что-то вроде этого http://masonry.desandro.com/demos/basic-multi-column.html Могу ли я получить это с помощью Blueprint и без javascript.

вещь с планом в настоящее время является то, что добавляется много белого пространства (см вложение)

Answer 1

Ниже только образец один .. Вы просто изменить ширину/высоту в соответствии с вашими требованиями. Надеюсь это поможет.

CSS 
---- 
.content { 
    float: left; 
    display: block; 
    width: 1000px; 
    background: red; 
} 

.sub-content { 
    float:left; 
    width: 200px; 
    background: blue; 
    margin: 10px; 
} 

Sample HTML 
----------- 
<div class="content"> 
<div class="sub-content" style="width: 500px; height: 300px;"> 
    DIV 1 
</div> 

<div class="sub-content" style="width: 200px; height: 100px;"> 
    DIV 2 
</div> 

<div class="sub-content" style="width: 500px; height: 300px;"> 
    DIV 3 
</div> 

<div class="sub-content" style="width: 250px; height: 300px;"> 
    DIV 4 
</div> 
</div>