css怎么让两个div在同一行显示

在网页开发中，div是常用的块级容器，默认会占据整行宽度，因此两个div自然会上下排列。如果我们希望它们在同一行显示，就需要通过css改变其排列行为。常见做法包括浮动、行内块以及弹性布局。

为什么div默认不在同一行

div元素的默认display值为block，块级元素具有以下特点：

• 独占一行，前后自动换行
• 宽度默认填满父容器
• 可以设置宽高、内外边距

所以不加任何样式时，两个<div>必然上下分布。

方法一：使用float浮动

给两个div都设置float:left，它们就会向左浮动并排显示。但浮动会脱离文档流，父容器可能高度塌陷，需要清除浮动。

<div class="parent">
  <div class="box">左侧</div>
  <div class="box">右侧</div>
  <div style="clear:both;"></div>
</div>

.box {
  float: left;
  width: 100px;
  height: 50px;
  background: #ddd;
}

方法二：使用display:inline-block

将div的display设为inline-block，使其兼具行内和块级特性，可以在同一行排列，并能设置宽高。

.box {
  display: inline-block;
  width: 100px;
  height: 50px;
  background: #ccc;
}

注意html中两个<div>之间的换行会产生空白间隙，可通过父容器font-size:0或注释消除。

方法三：使用flex弹性布局

flex是现代最推荐的方式，只需父容器设置display:flex，子div自动一行排列，还能轻松控制对齐。

<div class="parent">
  <div class="box">左</div>
  <div class="box">右</div>
</div>

.parent {
  display: flex;
}
.box {
  width: 100px;
  height: 50px;
  background: #eee;
}

三种方式对比

小结

要让两个div在同一行，核心就是改变其块级独占行的默认表现。float适合老代码，inline-block轻量直观，而flex布局语义清晰、控制灵活，是当前最实用的方案。

cssdiv布局flexbox修改时间：2026-07-27 11:27:18