Выравнивание элементов с обтеканием

[okunev2]

Есть такой код:

<div style="width: 400px;">
<div id="ft1"><img src="images/foto1.jpg"></div>
<div id="ft1"><img src="images/foto2.jpg"></div>
<div id="ft1"><img src="images/foto3.jpg"></div>
<div id="ft1"><img src="images/foto3.jpg"></div>
<div id="ft1"><img src="images/foto4.jpg"></div>
<div id="ft1"><img src="images/foto5.jpg"></div>
<div id="ft1"><img src="images/foto6.jpg"></div>
</div>

стиль:

#ft1 {
	float: left;
	margin-right: 15px;
	margin-bottom: 15px;
}

При разности восоты картинок, происходит такое смешение:

Подскажите как вылечить такое смешение, как показано на картинке, буду благодарен

[psywalker]

задай дивам высоту одинаковую

[okunev2]

задай дивам высоту одинаковую

строго высоту не укажешь же, какая-то из картинок может быть выше же

[eghik]

ну если надо только разместить картинки и известное их количество, то почему бы не воспользоваться не любимыми всеми таблицами?

[Игорь Ермаков]

Для реализации данной задачи я бы сделал все элементы как inline, и они бы выравнивались сами собой.

eghik, таблицы тут как раз не пройдут, в условии сказано, что картинка может быть любой высоты. Таблица не сломается, зато выглядеть всё это будет некрасиво.

[eghik]

Для реализации данной задачи я бы сделал все элементы как inline, и они бы выравнивались сами собой.

Помогает, но как тогда сделать отступы снизу-сверху? не маргин, не тем более паддинг не работает.

eghik, таблицы тут как раз не пройдут, в условии сказано, что картинка может быть любой высоты. Таблица не сломается, зато выглядеть всё это будет некрасиво.

ну может быть) но тут еще посмотреть надо. если не очень большая разница - то таблица не сильно испортит вид. так же и дивы, если разница большая в размере картинок, и с дивами будет не очень красиво.

Edited November 17, 2009 by eghik

[Justnewone]

Чистейший inline-block, для ослов inline и zoom

[okunev2]

Для реализации данной задачи я бы сделал все элементы как inline, и они бы выравнивались сами собой.

eghik, таблицы тут как раз не пройдут, в условии сказано, что картинка может быть любой высоты. Таблица не сломается, зато выглядеть всё это будет некрасиво.

Можно пример кода, буду благодарен

Чистейший inline-block, для ослов inline и zoom

Пожете пример привести, плиз, для моего случая

[eghik]

да, вот про zoom можно поподробнее? ) Для ослов )

[psywalker]

Можно пример кода, буду благодарен

Пожете пример привести, плиз, для моего случая

Гугл приведёт 50 примеров