如何使浮动子div的高度与父母的高度相匹配？

平衡浮动子级 Div 高度以匹配父级高度

问题陈述：

在包含以下 HTML 的页面结构：

<div class="parent">
    <div class="child-left floatLeft">
    </div>

    <div class="child-right floatLeft">
    </div>
</div>

随着左子 div 的内容扩展，父 div 的高度也会相应增加。然而，child-right div 的高度保持不变，这就提出了一个问题：如何使 child-right 的高度与父级的高度相等？

解决方案：

要使子右侧 div 的高度与其父级的高度相匹配，请将以下 CSS 属性应用于父级element:

.parent {
    overflow: hidden;
    position: relative;
    width: 100%;
}

这些属性确保父元素具有定义的高度并包含浮动的子元素。接下来，将以下 CSS 属性添加到 .child-right 类中：

.child-right {
    background: green;
    height: 100%;
    width: 50%;
    position: absolute;
    right: 0;
    top: 0;
}

这些属性为 child-right div 提供绝对位置，将其高度设置为 100% 并将其放置在靠右边缘的位置。父级。

有关创建等高列的更多详细示例和信息，请参阅参考部分中提供的链接

参考文献：

• [等高列的 CSS 示例]（链接到外部资源）
• [等高信息专栏]（链接到外部资源）

以上是如何使浮动子div的高度与父母的高度相匹配？的详细内容。更多信息请关注PHP中文网其他相关文章！