如何仅使用 CSS 使两个浮动 div 具有相同的高度？

在 HTML/CSS 中使两个浮动 Div 高度相同

简介

实现相等div 的高度可能具有挑战性，尤其是当它们并排且具有不同内容时长度。一种常见的解决方法是使用表格，但这种方法在语义上可能不合适。

使用 CSS 创建等高 Div

要在不使用表格的情况下实现等高，CSS提供了几种技术。一种方法涉及设置大的底部填充，用负底部边距否定该填充，并用隐藏溢出的容器包围 div。

实现

演示此技术，考虑以下 CSS 代码：

#container {
  overflow: hidden;
  width: 100%;
}

#left-col {
  float: left;
  width: 50%;
  background-color: orange;
  padding-bottom: 500em;
  margin-bottom: -500em;
}

#right-col {
  float: left;
  width: 50%;
  margin-right: -1px; /* for IE compatibility */
  border-left: 1px solid black;
  background-color: red;
  padding-bottom: 500em;
  margin-bottom: -500em;
}

在 HTML 中，创建 div 容器和两个子容器divs:

<div>

这种方法本质上强制两个 div 具有相同的高度，即使它们包含不同数量的内容。大的底部填充和负边距相互抵消，允许 div 只占用它们需要的垂直空间。隐藏溢出的容器确保任何多余的内容都不可见。

结论

这种 CSS 技术提供了一种语义上正确的方法来在 HTML/ 中创建等高浮动 div CSS。它有效地模仿了表格的行为，而不会引入不必要的标记。

以上是如何仅使用 CSS 使两个浮动 div 具有相同的高度？的详细内容。更多信息请关注PHP中文网其他相关文章！