Выстроить блоки неодинаковой высоты

[Denixxx]

Здравствуйте.
Подскажите как выстроить блоки по картинке ниже, если высота блока разная, а ширина известна?

Но это на другом сайте. А у меня не получается.

Вот что пока наваял:

<div style="width:145px;margin:3px;float:left;">
<h4><a href="#">Name</a></h4>
<p><a href="#" ><img src="#"  /></a></p>
<p>Price $200</p>
</div>

При этой вёрстке блоки расползаются и ведут себя не так, как я ожидал:

Большие расстояния между блоками по вертикали.

 

[vytyacom]

На ксс такого не сделаешь. Можно использовать display: inline-block вместо float: left, но тогда будет фиксированный ряд. Следующий будет начинаться только после самого высокого блока.
Чтоб было так как на 1й картинке вот 2 ссылки: Для просмотра ссылки Войди или Зарегистрируйся или Для просмотра ссылки Войди или Зарегистрируйся

 

[NikroVir]

На чистом css этого не сделать. Рекомедую использовать masonry (требует jQuery). Пример по настройке можете посмотреть Для просмотра ссылки Войди или Зарегистрируйся.
Так же можете рассмотреть ещё Для просмотра ссылки Войди или Зарегистрируйся.

 

[Leony]

Использовать бутстрап

div class="row"
      div class="col-md-число"
      div class="col-md-число"
      div class="col-md-число"

 

[Denixxx]

На ксс такого не сделаешь.

На чистом css этого не сделать.

Дааа, сегодня никто не получит печеньку.
Вот на чистом css: Для просмотра ссылки Войди или Зарегистрируйся
Тему можно закрывать, всё получилось.

 

[NikroVir]

про этот способ не знал, но вам стоило бы добавить что способ на CSS 3, т.е. IE 10+, для ранних версий IE в статье используется старый добрый
masonry.pkgd.min.js. но зачем обременять себя лишним css, если всёравно будете подключать jq и masonry (который весит всего пару кб)

 

[Denixxx]

зачем обременять себя лишним css, если всёравно будете подключать jq и masonry (который весит всего пару кб)

А вот и не буду. Пусть старые браузеры не видят красоты, а прочитать что на сайте им и так ничего не мешает.
А css весит 300 байт — нафиг яваскрипт, нафиг лишние плагины, нафиг лишние обращения к серверу.

Я никогда не подключаю кучу библиотек для красоты в устаревших браузерах.
Стараюсь сделать, чтобы было читаемо — и только.

Вот пример итога в ИЕ9:

Ничего страшного, хоть и не слишком красиво
Не выстроились блоки, нет теней и скруглений.

А вот в ФФ35:

Задумано было именно так.