如何使两个浮动子 DIV 的高度相等？

均衡浮动子 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中文网其他相关文章！