Stack дивы друг на друга в 2 ряда без пробелов

Question

мне очень нужна ваша помощь на этом:

Сейчас у меня есть дивы только друг на друга, наполненная динамически с различными содержимого, высота меняется ,

Теперь я хочу разместить их в 2 рядах. С фиксированной шириной и «float: left» этот вид работает уже.

Мой английский не самый лучший так взять пожалуйста взгляд на моем примере изображения первая:

Как вы можете видеть, что это пробел из-за третьего DIV, который не делает начните прямо под первым div из-за div номер 2, который МОЖЕТ быть выше в качестве первого div.

Теперь я задаюсь вопросом, есть ли возможность автоматически позиционировать эти divs выше, чтобы не было пробелов (они всегда должны начинаться прямо под изображением, которое находится выше wouth пробела, слева или справа).

ТАКОЕ:

Я надеюсь, что вы вроде поняли, что я имею в виду: D Заранее спасибо за отвечено!

EDIT: Code-Пример:

<div id="content"> 
<div class="xyz">BLABLA</div> 
<div class="xyz">BLABLA<br>morebla!<br>EVEN MORE BLA</div> 
<div class="xyz">BLABLA</div> 
</div> 
<style> 
#content { 
width: 648px; 
} 
.xyz { 
width: 303px; 
float: left; 
border:1px solid black; 
} 
</style> 

Remeber, высота всегда разные!

Answer 1

это сделать ...

<div id="content"> 
    <div class="column1" id="left"> 
    <div id="div1">...</div> 
    <div id="div3">...</div> 
    </div> 
    <div class="column2" id="left"> 
    <div id="div2">...</div> 
    <div id="div4">...</div> 
    </div> 
    </div> 

Тогда просто стиль стили COLUMN2 путем определения widht значения в вашем CSS.

Thanks,

@leo.

Answer 2

jQuery masonry делает вашу жизнь намного проще .. не изобретайте велосипед, особенно когда вы сталкиваетесь с классической проблемой css.