don*_*per 18 html css height inheritance clear
我正在尝试制作一个圆角的盒子,其中div的高度和宽度取决于内容,所以它会自动调整到它...
您可以在此处查看示例:http://pastehtml.com/view/1duizyf.html
问题是我无法获得"test_mid_left"(黑色背景)和"test_mid_right"(绿松石背景)来继承"test_mid_center"(绿色背景)的高度.我已经尝试过高度:100%和自动,但没有任何工作.那么如何让他们从内容中继承高度呢？
(我在示例的左右内容中使用"min-height:xx"的原因只是为了显示我正在谈论的是哪些框)
cla*_*uzy 27
如前所述,这不能用浮标来完成,它们不能继承高度,它们不知道它们的兄弟姐妹,所以例如侧面两个花车不知道中心内容的高度,所以它们不能继承从任何事情.
通常,继承的高度必须来自具有明确高度的元素,或者是否height: 100%;已经通过显示树向下传递给它.我唯一知道的是传递高度而不是来自顶部的"树"是一个绝对定位的元素 - 所以你可以例如绝对定位所有右上角左下角和角落(无论如何你知道角的高度和宽度)并且你似乎知道宽度(左/右)边框)和顶部/底部中心的高度,以及顶部/底部中心的宽度,很容易达到100% - 唯一需要计算的是内容增长时右侧/左侧的高度 -
即使不使用IE6 / 7不支持的所有四个定位坐标,您也可以这样做
我根据你提供的内容提出了一个例子,它确实依赖于固定宽度(你的框架),但我认为它也可以灵活地使用宽度？对于那些花哨的图像边框来说,这可能很酷,我们无法得到支持,直到多个背景图像或图像边框变得完全可用..谁知道,我在玩,所以只是坚持下去!
概念证明的例子在这里
问题
当一个元素浮动时,它的父元素不再包含它,因为浮动元素从流中移除.浮动元素不在自然流中,因此所有块元素都将呈现为浮动元素不均匀,因此父容器不会完全展开以保持浮动子元素.
请查看以下文章,以更好地了解CSS Float属性的工作原理:
潜在的解决方案
现在,我认为以下文章类似于您要做的事情.看看它,看看你是否可以解决你的问题.
我希望这有帮助.