CSS - make div наследует высоту

Я пытаюсь сделать ящик с закругленными углами, где высота и ширина div зависят от содержимого, поэтому он автоматически настраивается на него...

Здесь вы можете увидеть пример: http://pastehtml.com/view/1duizyf.html

Проблема в том, что я не могу получить "test_mid_left" (черный фон) и "test_mid_right" (бирюзовый фон), чтобы наследовать высоту из "test_mid_center" (зеленый фон). Я пробовал высоту: 100% и авто, но ни одна из них не работает. Итак, как мне заставить их наследовать высоту из содержимого?

(Причина, по которой я использовал "min-height: xx" в левом и правом содержимом на примере, - это просто показать, в каких ящиках я говорю)

Ответ 1

Как уже упоминалось, это невозможно сделать с помощью float, они не могут наследовать высоты, они не знают своих братьев и сестер, так что, например, боковые два поплавка не знают высоту содержимого центра, поэтому они могут 't наследуется от чего-либо.

Обычно унаследованная высота должна поступать либо из элемента с явной высотой, либо если height: 100%; передается через дерево отображения на него. Единственное, что я знаю об этом, - это высота, которая hasn ' t из вершины "дерева" является абсолютно позиционированным элементом - так что вы можете, например, полностью позиционировать все верхние правые нижние левые боковые стороны и углы (вы знаете высоту и ширину углов в любом случае) И поскольку вы, кажется, знаете границы ширины (левого/правого края) и высоты верхнего/нижнего) и ширины верхних/нижних центров, легко на 100% - единственное, что нужно вычислить, - это высота справа/слева, если содержание растет -

Это можно сделать даже без использования всех четырех координат позиционирования, которые IE6 /7 не поддерживает

Я привел пример, основанный на том, что вы дали, он полагается на фиксированную ширину (ваш фрейм), но я думаю, что он мог бы работать и с гибкой шириной? использование этого может быть круто для тех фантазийных границ изображения, с которыми мы не можем получить поддержку, пока не будет полностью доступно несколько фоновых изображений или границ изображений. Кто знает, я играл, поэтому просто торчайте там!

доказательство примера концепции здесь

Ответ 2

Проблема

Когда элемент перемещается, его родительский элемент больше не содержит его, потому что float удаляется из потока. Элемент с плавающей точкой выходит из естественного потока, поэтому все элементы блока будут отображаться так, как если бы плавающий элемент даже не присутствовал, поэтому родительский контейнер не будет полностью расширяться, чтобы удерживать положенный дочерний элемент.

Взгляните на следующую статью, чтобы лучше понять, как работает свойство CSS Float:

Тайна свойства плавающего CSS

Потенциальное решение

Теперь я думаю, что следующая статья напоминает то, что вы пытаетесь сделать. Посмотрите на это и посмотрите, сможете ли вы решить свою проблему.

Столбцы с одинаковой высотой с CSS-браузером

Надеюсь, это поможет.

Ответ 3

Отрицательный маржировочный трюк:

http://pastehtml.com/view/1dujbt3.html

Не элегантный, я полагаю, но он работает в некоторых случаях.

Ответ 4

Вам нужно вынуть поплавок: слева; свойство... потому что, когда вы используете float, родительский div не замаскивает высоту его детей... Если вы хотите, чтобы родительское погружение получало высоту детей, вам нужно предоставить родительскому div свойство css overflow: hidden; Но для решения вашей проблемы вы можете использовать display: table-cell; вместо float... он автоматически масштабирует высоту div до ее родительской высоты...