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

Тема в разделе "Верстка", создана пользователем Denixxx, 31 янв 2015.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Модераторы: ultra
  1. Denixxx

    Denixxx

    Регистр.:
    7 фев 2014
    Сообщения:
    247
    Симпатии:
    191
    Здравствуйте.
    Подскажите как выстроить блоки по картинке ниже, если высота блока разная, а ширина известна?
    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
    Большие расстояния между блоками по вертикали.
     
  2. vytyacom

    vytyacom Постоялец

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

    NikroVir Извращённый отшельник

    Регистр.:
    27 апр 2008
    Сообщения:
    319
    Симпатии:
    107
    На чистом css этого не сделать. Рекомедую использовать masonry (требует jQuery). Пример по настройке можете посмотреть тут.
    Так же можете рассмотреть ещё 9 вариантов.
     
  4. Leony

    Leony

    Регистр.:
    18 мар 2008
    Сообщения:
    153
    Симпатии:
    25
    Использовать бутстрап
    HTML:
    div class="row"
          div class="col-md-число"
          div class="col-md-число"
          div class="col-md-число"
     
  5. Denixxx

    Denixxx

    Регистр.:
    7 фев 2014
    Сообщения:
    247
    Симпатии:
    191
    Дааа, сегодня никто не получит печеньку.
    Вот на чистом css: http://w3bits.com/css-masonry/
    Тему можно закрывать, всё получилось.
     
    pozhisni, Solus_Rex, latteo и 2 другим нравится это.
  6. NikroVir

    NikroVir Извращённый отшельник

    Регистр.:
    27 апр 2008
    Сообщения:
    319
    Симпатии:
    107
    про этот способ не знал, но вам стоило бы добавить что способ на CSS 3, т.е. IE 10+, для ранних версий IE в статье используется старый добрый
    masonry.pkgd.min.js. но зачем обременять себя лишним css, если всёравно будете подключать jq и masonry (который весит всего пару кб)
     
    Последнее редактирование: 31 янв 2015
  7. Denixxx

    Denixxx

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

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

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

    А вот в ФФ35:
    ff35.png
    Задумано было именно так.
     
    Последнее редактирование: 1 фев 2015
    pozhisni и latteo нравится это.