CSS - заставить div наследовать высоту

Question

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

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

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

(причина, по которой я использовал «min-height: xx» в левом и правом контенте на примере, состоит просто в том, чтобы показать, о каких прямоугольниках я говорю)

Answer 1

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

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

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

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

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

Answer 2

Проблема

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

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

Тайна CSS-объекта Float

---

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

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

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

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

Answer 3

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

Answer 4

Трюк с отрицательной маржой:

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

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