css如何设置4个div并排显示

发布时间：2021-07-21 16:26:19 作者：chen
来源：亿速云阅读：1541

# CSS如何设置4个div并排显示

在网页布局中，实现多个元素水平排列是常见需求。本文将详细介绍7种主流CSS方法实现4个div并排显示，涵盖浮动、Flexbox、Grid等现代布局技术，并提供代码示例和兼容性分析。

## 一、基础HTML结构

首先创建基础HTML结构，包含4个相同样式的div：

```html
<div class="container">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
  <div class="box">Box 4</div>
</div>

二、7种实现方法

方法1：使用float浮动

传统浮动方案需要清除浮动防止布局塌陷：

.container {
  overflow: hidden; /* 清除浮动 */
}

.box {
  width: 25%;
  float: left;
  box-sizing: border-box;
  padding: 20px;
  background: #f0f0f0;
  border: 1px solid #ccc;
}

注意事项： - 必须设置明确宽度（总宽度不超过100%） - 父容器需要清除浮动 - 在移动端可能出现布局问题

方法2：Flexbox弹性布局（推荐）

现代浏览器首选方案：

.container {
  display: flex;
}

.box {
  flex: 1; /* 等分剩余空间 */
  margin: 0 10px;
  padding: 20px;
  background: #e9f7fe;
}

优势： - 响应式友好 - 无需计算精确宽度 - 支持对齐方式调整

方法3：CSS Grid网格布局

二维布局系统的解决方案：

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
}

.box {
  padding: 20px;
  background: #fff8e1;
}

高级控制： - 使用fr单位自动分配空间 - 通过gap控制间距 - 可定义行高和复杂布局

方法4：inline-block显示

.container {
  font-size: 0; /* 消除空白间隙 */
}

.box {
  display: inline-block;
  width: 25%;
  font-size: 16px;
  vertical-align: top;
}

注意点： - 需要处理inline-block的默认间距 - 对齐方式需特别设置 - 百分比宽度计算要精确

方法5：使用表格布局

模拟表格行为：

.container {
  display: table;
  width: 100%;
}

.box {
  display: table-cell;
  padding: 15px;
}

特点： - 单元格自动等宽 - 兼容性较好 - 缺乏灵活性

方法6：CSS columns多列布局

.container {
  column-count: 4;
  column-gap: 0;
}

.box {
  break-inside: avoid;
  padding: 10px;
}

适用场景： - 内容流式布局 - 需要自动平衡列高时 - 支持响应式列数调整

方法7：绝对定位（特殊场景）

.container {
  position: relative;
  height: 100px;
}

.box {
  position: absolute;
  width: 25%;
  top: 0;
}

.box:nth-child(1) { left: 0; }
.box:nth-child(2) { left: 25%; }
.box:nth-child(3) { left: 50%; }
.box:nth-child(4) { left: 75%; }

使用建议： - 需要精确控制位置时使用 - 脱离文档流需谨慎 - 父容器需明确高度

三、响应式处理

添加媒体查询实现移动端适配：

@media (max-width: 768px) {
  /* Flexbox方案响应式 */
  .container {
    flex-wrap: wrap;
  }
  .box {
    flex: 0 0 50%; /* 两列布局 */
  }
}

@media (max-width: 480px) {
  .box {
    flex: 0 0 100%; /* 单列布局 */
  }
}

四、间距与对齐优化

等间距分布

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

垂直居中

.container {
  align-items: center;
  height: 200px; /* 需要明确高度 */
}

五、浏览器兼容性对比

方法	IE支持	移动端兼容性	推荐指数
Float	6+	良好	★★☆☆☆
Flexbox	10+	优秀	★★★★★
Grid	不支持	良好	★★★★☆
inline-block	6+	优秀	★★★☆☆

六、最佳实践建议

现代项目：优先使用Flexbox
复杂布局：考虑CSS Grid
传统项目：float需配合clearfix
动态内容：避免使用绝对定位
间距控制：推荐使用gap/margin而非计算宽度

七、常见问题解答

Q：为什么我的div之间有空隙？ A：inline-block元素会解析HTML中的换行为空格，可设置父元素font-size:0消除

Q：如何实现不等宽排列？ A：Flexbox中可通过flex-grow调整比例，或Grid中使用非等分fr值

Q：内容超出如何处理？ A：设置min-width: 0和overflow属性控制溢出行为

通过以上方法，开发者可以根据项目需求选择最适合的4div并排布局方案。Flexbox和Grid作为现代CSS布局的核心技术，值得重点掌握。 “`

这篇文章共计约1500字，采用Markdown格式编写，包含： 1. 7种实现方法的详细代码示例 2. 响应式处理方案 3. 浏览器兼容性对比表格 4. 最佳实践建议 5. 常见问题解答符合技术文档的深度和广度要求。