У меня есть контейнер div, внутри которого я хочу упаковать переменное число div с неизвестной (переменной) высоты, но с заданным min-width.Мои требования:
Если контейнер достаточно широк, чтобы вместить два столбца, я хочу, чтобы они красиво распределены в двух столбцах без лишних пробелов.
Это не так, они должны просто идти друг над другом.
В настоящее время я дал div s width:48% margin-right:2%;float:left;, который прекрасно работает в состоянии с одним столбцом, нокогда я изменяю размер окна браузера, освобождая место для двух столбцов, каждый div, который заканчивается в левом столбце, настаивает на выравнивании по горизонтали с основанием последнего div, который шел вправо:
что у меня есть http://img602.imageshack.us/img602/5719/whatihave.png
Вот как я бы хотел, чтобы они пошли (не теряя места):
что я хочу http://img96.imageshack.us/img96/6985/whatiwantu.png
Я бы хотел чистыйРешение CSS, если возможно.
Спасибо!/ Gustav
РЕДАКТИРОВАТЬ: эта разметка иллюстрирует мою проблему:
<html>
<head>
<style type="text/css">
.box {
width: 48%;
min-width:550px;
margin-right:2%;
margin-bottom: 1.5em;
background:blue;
color:white;
height:180px;
float:left;
}
.tall {
height: 250px;
}
</style>
</head>
<body>
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box tall">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div style="clear:both"/>
</body>
</html>
.box генерируются динамически, так же как и их высоты, я просто добавил один выше, чтобы проиллюстрировать.