如何仅使用 CSS 使浮动 Div 等高？

修复 HTML/CSS 中的浮动 Div 高度差异

在 Web 开发领域，使用浮动 div 时会出现一个常见的挑战：确保它们的高度相等。这个难题通常可以使用 HTML 表格来解决，但对语义正确性的担忧仍然存在。

首选解决方案在于 CSS 的力量。通过实现特定的样式组合，我们可以实现等高浮动div：

1. Overflow Hidden：将div包裹在父div中，并使用overflow：hidden。这将 div 限制在指定区域内，防止它们超出其边界。
2. 底部填充和负边距：对 div 应用慷慨的底部填充，例如 500em。这会在 div 下方创建一个较大的虚拟空间。
3. 负底部边距：添加等于填充值的负边距。这会将 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;
  border-left: 1px solid black;
  background-color: red;
  padding-bottom: 500em;
  margin-bottom: -500em;
}

通过采用这种技术，我们可以确保浮动 div 自动调整它们的高度与最高的内容相匹配，创造出令人愉悦的视觉一致性。

以上是如何仅使用 CSS 使浮动 Div 等高？的详细内容。更多信息请关注PHP中文网其他相关文章！