【CSS】三个DIV在同一行平分宽度的五种实现方法

文章目录

- 三个DIV在同一行平分宽度的五种实现方法
- - Flex
  - Grid
  - Table
  - float / display: inline-block + width: 33.333%

三个DIV在同一行平分宽度的五种实现方法

Flex

将父容器的 display 设置为 flex，将子元素的 flex 都设为1 来平分空间。

  .container {
    display: flex;
  }
  .container div {
    flex: 1; /* 这会确保所有子元素都有相同的宽度，并平均分布空间 */
  }

<div class="container">
  <div>Div 1</div>
  <div>Div 2</div>
  <div>Div 3</div>
</div>

Grid

Grid 布局是 CSS 的另一种强大布局系统，它允许你在两个维度上对元素进行控制：行和列。你可以通过将父容器的 display 属性设置为 grid 并使用 grid-template-columns 来指定列的数量和宽度，来在同一行内平均分布三个 div 元素。

  .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 创建三个平等宽度的列 */
    gap: 10px; /* 可选，定义列之间的间隙 */
  }

<div class="container">
  <div>Div 1</div>
  <div>Div 2</div>
  <div>Div 3</div>
</div>

Table

用传统的 table 布局来实现三个 div 元素在同一行内平均分宽度。虽然使用 table 布局来布置非表格数据内容（如页面布局）在现代网页设计中不太推荐，但技术上仍然是可行的。这种方法可以通过创建一个包含单行和三个单元格 td 的表格来实现，每个单元格内部包含一个 div 元素。

  table {
    width: 100%; /* 使表格宽度占满容器 */
    border-collapse: collapse; /* 移除单元格之间的间隔 */
  }
  td {
    text-align: center; /* 文本居中 */
  }

<table>
  <tr>
    <td><div class="content-div">Div 1</div></td>
    <td><div class="content-div">Div 2</div></td>
    <td><div class="content-div">Div 3</div></td>
  </tr>
</table>

float / display: inline-block + width: 33.333%

float:

  .float-div {
    float: left;
    width: 33.3333%;
  }
  .container:after { /* 清除浮动 */
    content: "";
    display: table;
    clear: both;
  }

<div class="container">
  <div class="float-div">Div 1</div>
  <div class="float-div">Div 2</div>
  <div class="float-div">Div 3</div>
</div>

inline-block

  .inline-block-div {
    display: inline-block;
    width: 33.3333%;
    box-sizing: border-box; /* 确保边框和内填充计入总宽度 */
    border: 1px solid #000; /* 可见边框，仅作示例用途 */
    vertical-align: top; /* 对齐方式 */
  }
  /* 移除元素间产生的空隙 */
  .container {
    font-size: 0;
  }
  .inline-block-div {
    font-size: 16px; /* 重置字体大小 */
  }

<div class="container">
  <div class="inline-block-div">Div 1</div><!--
  --><div class="inline-block-div">Div 2</div><!--
  --><div class="inline-block-div">Div 3</div>
</div>

注意在 display: inline-block; 示例中，为了防止元素间出现空隙（由 HTML 中的换行符或空格造成），这里采用了注释  来紧邻连接这些元素。此外，将 .container 的 font-size 设置为 0，然后再为 .inline-block-div 重置 font-size，也是为了去除元素间的空隙。

秒客网