如何在一行中对齐 div - CSS

有时候我们需要将多个 div 元素放在一行中，而这些元素的宽度不一定相同，如何让它们对齐呢？本文将介绍几种方法。

1. 使用浮动

设置 float 属性可以让元素浮动在父级元素的左侧或右侧，当多个元素都浮动在同一方向时，它们会自动排成一行。例如，我们让三个 div 元素向左浮动：

div {
  float: left;
}

<div></div>
<div></div>
<div></div>

效果如下：

需要注意的是，使用浮动的元素需要清除浮动才能正确显示，可以在父级元素中添加一个空的 div，使用 clear 属性清除浮动，例如：

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="clear"></div>
</div>

.parent {
  border: 1px solid #ccc;
}

.child {
  float: left;
  width: 100px;
  height: 50px;
  margin-right: 10px;
}

.clear {
  clear: both;
}

效果如下：

2. 使用 flexbox

flexbox 是一种布局模式，可以轻松地对齐多个元素。使用 display: flex 属性可以将父级元素设置为 flex 容器，然后通过 justify-content 和 align-items 属性控制子元素的对齐方式。例如，对三个 div 元素进行横向对齐：

.parent {
  display: flex;
  justify-content: space-between;
}

<div class="parent">
  <div></div>
  <div></div>
  <div></div>
</div>

效果如下：

需要注意的是，使用 flexbox 的浏览器兼容性较差，需要添加浏览器前缀，例如 -webkit-。

3. 使用 inline-block

将元素设置为 display: inline-block 属性可以让它们在同一行中显示，相比于浮动，它的清除方式更加简单。例如，对三个 div 元素进行横向排列：

.child {
  display: inline-block;
  width: 100px;
  height: 50px;
  margin-right: 10px;
}

<div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

效果如下：

需要注意的是，使用 inline-block 时需要处理换行符带来的空格，可以在父级元素中添加 font-size: 0 属性，或者使用注释避免换行符，例如：

<div>
  <div></div><!--
  --><div></div><!--
  --><div></div>
</div>

div {
  font-size: 0;
}

div > div {
  display: inline-block;
  width: 100px;
  height: 50px;
  margin-right: 10px;
}