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

Denixxx

Мой дом здесь!
Регистрация
7 Фев 2014
Сообщения
244
Реакции
216
Здравствуйте.
Подскажите как выстроить блоки по картинке ниже, если высота блока разная, а ширина известна?
bloki_raznoj_vysoty.png
Но это на другом сайте. А у меня не получается.

Вот что пока наваял:
Код:
<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>

При этой вёрстке блоки расползаются и ведут себя не так, как я ожидал:
raspolzaetsja.png
Большие расстояния между блоками по вертикали.
 
На ксс такого не сделаешь. Можно использовать display: inline-block вместо float: left, но тогда будет фиксированный ряд. Следующий будет начинаться только после самого высокого блока.
Чтоб было так как на 1й картинке вот 2 ссылки: Для просмотра ссылки Войди или Зарегистрируйся или Для просмотра ссылки Войди или Зарегистрируйся
 
На чистом css этого не сделать. Рекомедую использовать masonry (требует jQuery). Пример по настройке можете посмотреть Для просмотра ссылки Войди или Зарегистрируйся.
Так же можете рассмотреть ещё Для просмотра ссылки Войди или Зарегистрируйся.
 
Использовать бутстрап
HTML:
div class="row"
      div class="col-md-число"
      div class="col-md-число"
      div class="col-md-число"
 
На ксс такого не сделаешь.
На чистом css этого не сделать.

Дааа, сегодня никто не получит печеньку.
Вот на чистом css: Для просмотра ссылки Войди или Зарегистрируйся
Тему можно закрывать, всё получилось.
 
про этот способ не знал, но вам стоило бы добавить что способ на CSS 3, т.е. IE 10+, для ранних версий IE в статье используется старый добрый
masonry.pkgd.min.js. но зачем обременять себя лишним css, если всёравно будете подключать jq и masonry (который весит всего пару кб)
 
Последнее редактирование:
зачем обременять себя лишним css, если всёравно будете подключать jq и masonry (который весит всего пару кб)
А вот и не буду. Пусть старые браузеры не видят красоты, а прочитать что на сайте им и так ничего не мешает.
А css весит 300 байт — нафиг яваскрипт, нафиг лишние плагины, нафиг лишние обращения к серверу.

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

Вот пример итога в ИЕ9:
ie9.png
Ничего страшного, хоть и не слишком красиво
Не выстроились блоки, нет теней и скруглений.

А вот в ФФ35:
ff35.png
Задумано было именно так.
 
Последнее редактирование:
Назад
Сверху