авто высота div согласно соседним блокам

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

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

    denism300 Постоялец

    Регистр.:
    10 май 2014
    Сообщения:
    117
    Симпатии:
    4
    Имеется конструкция, в которой выводится случайная информация, в максимально упрощенном виде выглядящая так:
    HTML:
    <div class="main">
         <div class="item">
                <div class="item-img-1">картинка-1</div>
                <div class="item-desc">описание</div>
                <div class="item-img-2">картинка-2</div>
         </div>
         <div class="item">
                <div class="item-img-1">картинка-1</div>
                <div class="item-desc">описание</div>
                <div class="item-img-2">картинка-2</div>
         </div>
         <div class="item">
                <div class="item-img-1">картинка-1</div>
                <div class="item-desc">описание</div>
                <div class="item-img-2">картинка-2</div>
         </div>
    </div>
    CSS всего этого дела:
    Код:
    .main {
        width: 100%;
    }
    .item {
       width: 33%;
       float: left;
       display: block;
    }
    .item-img-1, .item-img-2, .item-desc {
       width: 100%;
       display: block;
    }
    Блоки .item-img-1 и item-img-2 имеют всегда одинаковую высоту, т.к. все картинки фиксированной высоты.
    Высота блока .item-desc зависит от содержимого, которое может поместиться как в одну строку, так и в 5.
    Сейчас одинаковая высота блоков .item реализована путем задания фиксированной высоты блока .item-desc из расчета содержимого в 6 строк.
    Необходимо сделать нечто следующее:
    К примеру, в первом и третьем блоке .item содержимое .item-desc вывелось равным 1 строке, а во втором блоке - 3 строкам. В этом случае, блоки .item-desc в первом и третьем блоке .item должны стать равными блоку .item-desc во втором блоке item.
    Т.е., другими словами, соседние блоки .item-desc должны каждый раз принимать высоту блока .item-desc с максимально большим содержимым

    с фиксированной высотой я сделал. но как-то некрасиво смотрится, когда выводятся все три блока с описанием из 1-2 строк
     
    Последнее редактирование модератором: 29 апр 2015
  2. Iga

    Iga Постоялец

    Регистр.:
    12 янв 2014
    Сообщения:
    139
    Симпатии:
    17
    Через table-cell можно, если я правильно задачу понял.
    HTML:
    <div class="main">
         <div class="item">
                <div class="item-img-1">картинка-1</div>
                <div class="item-desc">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis</div>
                <div class="item-img-2">картинка-2</div>
         </div>
         <div class="item">
                <div class="item-img-1">картинка-1</div>
                <div class="item-desc">orem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt</div>
                <div class="item-img-2">картинка-2</div>
         </div>
         <div class="item">
                <div class="item-img-1">картинка-1</div>
                <div class="item-desc">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum znostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing</div>
                <div class="item-img-2">картинка-2</div>
         </div>
    </div>
    CSS =>
    Код:
    .main {
        width: 100%;
    }
    .item {
      display: table-cell;
      width: 33%;
      border:1px solid #000;
    }
    .item-img-1, .item-img-2, .item-desc {
       width: 100%;
       display: block;
    }
     
  3. denism300

    denism300 Постоялец

    Регистр.:
    10 май 2014
    Сообщения:
    117
    Симпатии:
    4
    не совсем то получилось.
    http://jsfiddle.net/9v2atyd4/2/

    мне же необходимо, чтобы блок .item-desc был одинаковой высоты во всех трех родительских блоках.
     
  4. Iga

    Iga Постоялец

    Регистр.:
    12 янв 2014
    Сообщения:
    139
    Симпатии:
    17
    Тогда яваскриптом вычислять высоту самого длинного блока и присваивать её остальным. Погуглите, должно быть, думаю, достаточно простое решение. Я явускрипт не умею к сожалению
     
  5. denism300

    denism300 Постоялец

    Регистр.:
    10 май 2014
    Сообщения:
    117
    Симпатии:
    4
    м-да. я тоже еще не знаю жаваскрипт... буду гуглить, спасибо за помощь

    вот, нагуглил скрипт, вдруг кому пригодится
    http://jsfiddle.net/denism300/9v2atyd4/3/
     
  6. Iga

    Iga Постоялец

    Регистр.:
    12 янв 2014
    Сообщения:
    139
    Симпатии:
    17
    http://habrahabr.ru/post/64173/
    вот тут что-то...начало по крайней мере с моего способа тоже :)
    Дальше не вчитывался.
     
  7. denism300

    denism300 Постоялец

    Регистр.:
    10 май 2014
    Сообщения:
    117
    Симпатии:
    4
    я видел эту статью на хабре... Там немного не о том. Там расписывают, как выровнять 3 столбца, расположенные в общем блоке div, а у меня в разных
     
  8. vytyacom

    vytyacom Постоялец

    Регистр.:
    19 ноя 2014
    Сообщения:
    136
    Симпатии:
    54
    Если кроссбраузерность не особо нужна и хочется чтото новое изучить (ну если эта штука еще не известна), то можно попробовать флексбоксы (в ие9 вроде вообще не работает и ниже, в ие10 с танцами с бубном).
    Демка с примерами. Описание.
    Минусы конечно то что кроссбраузерность не та, а так достаточно простой способ.
     
  9. denism300

    denism300 Постоялец

    Регистр.:
    10 май 2014
    Сообщения:
    117
    Симпатии:
    4
    интересно, конечно, но нужна и кроссбраузерность и адаптивность к мобильным устройствам. Хотя там заявлена поддержка iOS и Андроид.
    А так поизучаю... спасибо за инфу