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

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

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

    Denixxx

    Регистр.:
    7 фев 2014
    Сообщения:
    247
    Симпатии:
    194
    Здравствуйте.
    Подскажите как выстроить блоки по картинке ниже, если высота блока разная, а ширина известна?
    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
    Симпатии:
    55
    На ксс такого не сделаешь. Можно использовать display: inline-block вместо float: left, но тогда будет фиксированный ряд. Следующий будет начинаться только после самого высокого блока.
    Чтоб было так как на 1й картинке вот 2 ссылки: Перейти по ссылке
     
  3. NikroVir

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

    Регистр.:
    27 апр 2008
    Сообщения:
    326
    Симпатии:
    108
    На чистом css этого не сделать. Рекомедую использовать masonry (требует jQuery). Пример по настройке можете посмотреть Перейти по ссылке.
    Так же можете рассмотреть ещё Перейти по ссылке.
     
  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
    Симпатии:
    194
    Дааа, сегодня никто не получит печеньку.
    Вот на чистом css: Перейти по ссылке
    Тему можно закрывать, всё получилось.
     
    pozhisni, Solus_Rex, latteo и 2 другим нравится это.
  6. NikroVir

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

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

    Denixxx

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

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

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

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