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

D

denism300

Постоялец
Регистрация
10 Май 2014
Сообщения
129
Реакции
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 строк
 
Последнее редактирование модератором:
Через 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;
}
 
не совсем то получилось.
Для просмотра ссылки Войди или Зарегистрируйся

мне же необходимо, чтобы блок .item-desc был одинаковой высоты во всех трех родительских блоках.
 
Тогда яваскриптом вычислять высоту самого длинного блока и присваивать её остальным. Погуглите, должно быть, думаю, достаточно простое решение. Я явускрипт не умею к сожалению
 
м-да. я тоже еще не знаю жаваскрипт... буду гуглить, спасибо за помощь

вот, нагуглил скрипт, вдруг кому пригодится
Для просмотра ссылки Войди или Зарегистрируйся
 
Для просмотра ссылки Войди или Зарегистрируйся
вот тут что-то...начало по крайней мере с моего способа тоже :)
Дальше не вчитывался.
 
я видел эту статью на хабре... Там немного не о том. Там расписывают, как выровнять 3 столбца, расположенные в общем блоке div, а у меня в разных
 
Если кроссбраузерность не особо нужна и хочется чтото новое изучить (ну если эта штука еще не известна), то можно попробовать флексбоксы (в ие9 вроде вообще не работает и ниже, в ие10 с танцами с бубном).
Для просмотра ссылки Войди или Зарегистрируйся. Для просмотра ссылки Войди или Зарегистрируйся.
Минусы конечно то что кроссбраузерность не та, а так достаточно простой способ.
 
интересно, конечно, но нужна и кроссбраузерность и адаптивность к мобильным устройствам. Хотя там заявлена поддержка iOS и Андроид.
А так поизучаю... спасибо за инфу
 
Войдите или зарегистрируйтесь для ответа.
Назад
Сверху