2015-06-10 2 views
0

Так что у меня 2 дивыУстановите высоту так же, как рядом с ней сиблогинг div?

В настоящее время

ДИВ # 1 {поплавок: левый; ширина: 48%} и содержит некоторую галерею doodad

div # 2 is {float: right; ширина: 48%} и содержит стопку кнопок

после этого в том же контейнере следует куча других разделов и открытого текста.

Итак, что бы я хотел сделать, это иметь div # 1, продолжая делать свою автоматическую высоту, но я хочу, чтобы высота div # 2 равнялась div # 1, чтобы я мог вертикально растягивать кнопки внутри.

У меня нет доступа к структуре (где-то глубоко в php-фреймворке), и все, что у меня есть, это CSS. Возможно ли это в моих текущих ограничениях?

ответ

0

Применить

display: flex; 

в окружающем контейнере, то

float: none; 

к div#1 и div#2.

Примечание: Это только жизнеспособное решение, если есть родительский контейнер, который содержит только эти два div.

Learn more about flex.

+0

hooray, я сделал это с {display: flex; flex-wrap: wrap;} так как у меня было больше вещей. Кажется, что они следуют своим доступным спецификациям размеров, когда в режиме обертывания так 100% для 1 в строке, <50% для 2 в строке и т. Д. – user81993

+0

Не забудьте нажать галочку слева от ответа, который лучше всего помог вам решить проблему. – connexo

0

Не видя его трудно сказать наверняка, но я думаю, что если DIV # 1 и DIV # 2 оба имели высоту: 100%, то при ДИВ # 1 «растет» от содержания, так будет родительский div, и поскольку оба дочерних div (1 & 2) составляют 100% высоты родителя, оба должны расти одинаково.

0

Для браузеров, поддерживающих CSS3.

Установить родительский DIV:

<div id="parent"> 
<div id="child_1"></div> 
<div id="child_2></div> 
</div> 

Затем в CSS установить #parent_DIV для отображения в виде таблицы (дисплей: стол). Каждый дочерний DIV должен отображать: table-cell. В этом случае высший div установит правило. Добавить границы для каждого (включая родителя) для пробной версии и проверить его.

Я вытащил это из головы, но, как правило, это будет работать, в том числе новые браузеры IE.

Вот это более подробно: http://www.brenkoweb.com/tutorials/css/css-visual-formatting-model/display-property.php

И скоро, надеюсь, больше примеров Folow.

Смежные вопросы