HTML/CSS: 使两个浮动的div等高

在本文中，我们将介绍如何使用HTML和CSS来实现使两个浮动的div等高的效果。

阅读更多：HTML 教程

问题描述

在网页设计中，有时候我们希望两个浮动的div元素在同一行显示，并且它们的高度要保持一致，不论内容有多少。传统上，我们会使用JavaScript来解决这个问题。但是，现在有一种更简单的方法，使用纯HTML和CSS就可以轻松实现。

解决方案

为了使两个浮动的div等高，我们可以使用flexbox布局。简单来说，flexbox是一个强大的CSS3布局模块，可以帮助我们在一个容器中创建灵活的和自适应的布局。下面是实现的步骤：

创建一个div容器，并设置其为flexbox布局。

<div class="container">
  <div class="left-div">Left Content</div>
  <div class="right-div">Right Content</div>
</div>

在CSS中，设置容器的display属性为flex，并且设置align-items属性为stretch。

.container {
  display: flex;
  align-items: stretch;
}

设置每个子元素的flex-grow属性为1，使它们平分容器的剩余空间。

.left-div, .right-div {
  flex-grow: 1;
}

设置每个子元素的margin属性为负值，使它们能够完全填充父容器。

.left-div, .right-div {
  margin-bottom: -9999px;
  padding-bottom: 9999px;
}

这样，两个浮动的div就会在同一行显示，并且它们的高度会自动保持一致。

示例

下面是一个完整的示例，展示了如何使用HTML和CSS实现使两个浮动的div等高的效果。

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: flex;
      align-items: stretch;
    }

    .left-div, .right-div {
      flex-grow: 1;
      margin-bottom: -9999px;
      padding-bottom: 9999px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="left-div">
      <h2>Left Content</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus varius dui, quis dignissim felis vehicula at. </p>
    </div>
    <div class="right-div">
      <h2>Right Content</h2>
      <p>Phasellus ultricies ultrices fermentum. Sed cursus quam eget tortor accumsan, sed tristique metus venenatis. </p>
      <p>Donec non odio massa. Phasellus ut pharetra dui. Integer laoreet odio eu consequat cursus. </p>
    </div>
  </div>
</body>
</html>

在这个示例中，左侧的div包含了一段Lorem ipsum文本，右侧的div包含了三段文本。两个div的高度会根据内容自动调整，保持一致。