CSS 如何使多个 div 在一行显示，同时保持宽度
在本文中，我们将介绍如何使用 CSS 实现多个 div 在一行显示，同时保持各自的宽度不变。
阅读更多：CSS 教程
使用浮动
一种常见的方法是使用浮动来实现多个 div 在一行显示。我们可以将每个 div 设置为浮动，并将它们的宽度设为固定值或百分比。下面是一个示例：
.container {
overflow: hidden; /* 清除浮动 */
}
.item {
float: left;
width: 33.33%; /* 三个 div 平分一行 */
}
在上面的示例中，我们将三个 div 分别设置为浮动，并将它们的宽度设置为33.33%，这样它们就能够平分一行并保持各自的宽度不变。
需要注意的是，在使用浮动布局时，我们需要给容器设置 overflow: hidden;，这可以清除浮动带来的高度塌陷问题。
使用 Flexbox
另一种方法是使用 Flexbox 弹性盒子布局。Flexbox 提供了强大的布局能力，可以灵活地改变子元素在容器中的位置和宽度。下面是一个使用 Flexbox 的示例：
.container {
display: flex;
}
.item {
flex: 1; /* 子元素均分容器宽度 */
}
在上面的示例中，我们将容器设置为 display: flex;，这样容器就成为了一个 Flex 容器。每个子元素都将自动分配相同的宽度，这样它们就能够在一行中显示，并且保持各自的宽度不变。
需要注意的是，Flexbox 还提供了很多强大的属性，可以控制子元素的位置、对齐方式、以及可伸缩性等，可以根据具体需求进行调整。
使用 Inline-block
还有一种方法是使用 inline-block，我们可以将每个 div 设置为 inline-block，并将它们的宽度设为固定值或百分比。下面是一个示例：
.container {
font-size: 0; /* 清除 inline-block 元素之间的空格 */
text-align: center; /* 居中显示 */
}
.item {
display: inline-block;
width: 33.33%; /* 三个 div 平分一行 */
font-size: 16px; /* 恢复字体大小 */
}
在上面的示例中，我们将三个 div 设置为 inline-block，并将它们的宽度设置为33.33%，这样它们就能够在一行中显示，并保持各自的宽度不变。为了避免 inline-block 元素之间的间隔，我们给容器设置 font-size: 0;，然后再给子元素设置合适的字体大小。
同样需要注意的是，我们可以使用 text-align: center; 属性来将 inline-block 元素居中显示。
总结
在本文中，我们介绍了三种方法来实现多个 div 在一行显示，同时保持各自的宽度不变。我们可以使用浮动、Flexbox 或 inline-block 来达到这个目的。每种方法都有各自的优缺点，具体的选择取决于具体的需求和场景。希望本文能对你理解和应用这些方法有所帮助。
总之，通过合理使用 CSS，我们可以灵活地实现多个 div 在一行显示，并保持它们的宽度不变，从而满足我们对页面布局的需求。无论是使用浮动、Flexbox 还是 inline-block，都可以根据具体情况选择合适的方法来实现。祝你在前端开发中取得更好的效果！