CSS 两个并排的 div

在本文中，我们将介绍如何使用 CSS 来实现两个并排显示的 div。

阅读更多：CSS 教程

布局方法

有多种方法可以实现两个 div 并排显示，以下是两种常见的方法：

方法一：使用浮动（float）

通过为两个 div 设置浮动属性，可以使它们并排显示在同一行。首先，我们需要为两个 div 设置相同的宽度和高度，并将它们的浮动值都设置为左浮动（float: left）。下面是一个示例代码：

.div1, .div2 {
  width: 200px;
  height: 200px;
  float: left;
}

<div class="div1">Div 1</div>
<div class="div2">Div 2</div>

通过以上代码，可以看到两个 div 会并排显示在同一行。

方法二：使用 Flexbox 布局

Flexbox 是 CSS 提供的一种布局模型，可以用于实现各种复杂的布局效果。通过设置父元素的 display 属性为 flex，可以使其子元素按照一定的规则进行布局。以下是使用 Flexbox 布局实现两个并排显示的 div 的示例代码：

.container {
  display: flex;
}

.div1, .div2 {
  flex: 1;
}

<div class="container">
  <div class="div1">Div 1</div>
  <div class="div2">Div 2</div>
</div>

通过以上代码，可以看到两个 div 会并排显示在同一行，并且宽度平分父容器。

示例

以下是一个完整的示例代码，展示了如何使用浮动和 Flexbox 布局来实现两个并排显示的 div：

<!DOCTYPE html>
<html>
<head>
  <style>
    .div1, .div2 {
      width: 200px;
      height: 200px;
    }

    /* 使用浮动布局 */
    .div1 {
      float: left;
      background-color: red;
    }

    .div2 {
      float: left;
      background-color: blue;
    }

    /* 使用 Flexbox 布局 */
    .container {
      display: flex;
    }

    .div3, .div4 {
      flex: 1;
    }

    .div3 {
      background-color: green;
    }

    .div4 {
      background-color: yellow;
    }
  </style>
</head>
<body>
  <h1>浮动布局：</h1>
  <div class="div1">Div 1</div>
  <div class="div2">Div 2</div>

  <h1>Flexbox 布局：</h1>
  <div class="container">
    <div class="div3">Div 3</div>
    <div class="div4">Div 4</div>
  </div>
</body>
</html>

通过运行以上示例代码，可以在浏览器中看到两个并排显示的 div，一个使用了浮动布局，另一个使用了 Flexbox 布局。