均衡浮动子 DIV 的高度
问题:
在页面布局中父 DIV 包含两个浮动子 DIV,只有第一个子 DIV 扩展其高度当其中的内容增加时,以匹配父级的高度。第二个子 DIV 保持默认高度,外观不均匀。
解决方案:
确保第二个子 DIV (.child-right) 扩展到与其父级高度相同,将以下 CSS 应用于父级 .parent 和子级 .child-right elements:
说明:
- 在父元素上设置溢出:隐藏可防止子 DIV 的内容溢出父元素的边界。 🎜>
相对定位父元素允许子 DIV 在其内部使用绝对定位- 在父元素上设置 width: 100% 可确保其占据其容器的整个宽度。
- 对于子 DIV,设置 height: 100% 使其扩展到高度
- width: 50% 确保它占据父级的一半width。
- 使用 right: 0 和 top: 0 进行绝对定位,将子 DIV 放置在父级 DIV 的右上角,与右边缘对齐。
-
通过使用此CSS 属性的组合,浮动的子 DIV 将扩展以匹配其父 DIV 的高度,从而导致两个子 DIV 之间的高度分布相等。
以上是如何使两个浮动子 DIV 的高度相等?的详细内容。更多信息请关注PHP中文网其他相关文章!