如何使用DIV元素在HTML中创建行布局

首选实现方式：Flex弹性布局 #

这是目前最省心、和参考效果图匹配度最高的方案，全程不需要引入表格、列表这类非DIV标签：

• 结构逻辑：用一个父DIV包裹所有需要横向排列的内容块DIV，完全符合DIV搭布局的要求
• 核心配置：
  • 给父DIV加 display: flex，直接开启横向排列的弹性布局模式
  • 给每个子内容块加 flex: 1，不需要手动计算宽度，所有子块会自动均分父容器的可用宽度
  • 子块之间的均匀间距直接用父级的 gap 属性控制，不用给子块单独设外边距，能避免最外侧出现多余边距的问题
  • 需要调整对齐效果时，父级可以通过 justify-content 控制水平方向对齐、align-items 控制垂直方向对齐，完全可以还原参考图里的块对齐效果
• 基础实现代码示例：

<!-- 行布局父容器 -->
<div style="display: flex; gap: 20px; width: 100%; box-sizing: border-box; padding: 16px;">
  <!-- 内容块DIV，自动等宽 -->
  <div style="flex: 1; height: 140px; border: 1px solid #e5e5e5; border-radius: 8px;">块1内容</div>
  <div style="flex: 1; height: 140px; border: 1px solid #e5e5e5; border-radius: 8px;">块2内容</div>
  <div style="flex: 1; height: 140px; border: 1px solid #e5e5e5; border-radius: 8px;">块3内容</div>
</div>

兼容老旧场景的备用方案：浮动布局 #

如果需要兼容版本非常老的浏览器环境，可以用浮动方案实现：

• 给所有子内容块设置 float: left，手动计算每个块的宽度（扣除块之间的间距占比）
• 给父DIV加清除浮动的样式，避免出现父容器高度塌陷的问题
• 这个方案维护成本更高，需要手动调整适配不同宽度的块间距，非必要不优先选

注意：不要给子块设置固定像素宽度，否则窗口缩放时很容易出现块排到下一行的错位问题，和参考图的适配效果脱节。

内容的提问来源于stack exchange，提问作者Candi