CSS Как я заполнить это пустое пространство в поле

Question

Guy, К сожалению я сосать, что

Как я могу сделать это все мои ящики избежать расстояния, сделанное поле 1, так что коробка 4 автоматическая настройка на вершине

Мой Fiddle ссылка - http://jsfiddle.net/QKbEk/3/

.grp { 
width: 140px; 
margin: 0px auto; 
} 

.box { 
background: red; 
margin: 3px; 
float: left; 
width: 50px; 
height: 50px 
} 

Answer 1

Вы можете изменить правила для .box4 к:

.box4 { 
    background: red; 
    float: left; 
    margin: 3px; 
    width: 50px; 
    height: 50px; 
    position:relative; 
    top:-25px; 
} 

jsFiddle example

Это происходит из-за правила применительно к плавал элементы. В частности, «Внешняя вершина плавающего ящика может быть не выше внешней верхней части любого блока или плавающего поля, сгенерированного элементом ранее в исходном документе». Однако, используя позиционирование, вы можете поместить блок везде, где вам нужно.

Answer 2

<div class="grp"> 
    <div style="float:left;width:40%"> 
     <div class="box" style="height: 80px">box 1</div> 
     <div class="box">box 4</div> 
    </div> 
    <div style="float:left;width:40%"> 
     <div class="box">box 2</div> 
     <div class="box">box 3</div> 
     <div class="box">box 5</div> 
    </div> 
</div> 

Джошуа Джонсон пост для дизайна кладки: http://designshack.net/articles/css/masonry/