跳至主要內容

多列布局

Mr.LRH2021/3/26CSS布局CSS大约 16 分钟

多列布局

两列布局

左列定宽，右列自适应

float + margin

float + margin 左列定宽，右列自适应
<div class="container">
  <div class="left">左侧定宽</div>
  <div class="right">右侧自适应</div>
</div>
.container {
  height: 100px;
  font-weight: bold;
  color: #fff;
}

.left {
  float: left;
  width: 100px;
  height: 100%;
  background-color: #3eaf7c;
}

.right {
  height: 100%;
  /* 大于等于左侧宽度 */
  margin-left: 100px;
  background-color: #f2a444;
}

float + margin(fix)

float + margin(fix) 左列定宽，右列自适应
<div class="container">
  <div class="left">左侧定宽</div>
  <div class="right-fix">
    <div class="right">右侧自适应</div>
  </div>
</div>
.container {
  height: 100px;
  font-weight: bold;
  color: #fff;
}

.left {
  float: left;
  width: 100px;
  height: 100%;
  background-color: #3eaf7c;
}

.right-fix {
  float: right;
  width: 100%;
  height: 100%;
  /* 正值大于或等于左列的宽度,才能显示在同一行 */
  margin-left: -100px;
}

.right {
  height: 100%;
  /* 大于等于左侧宽度 */
  margin-left: 100px;
  background-color: #f2a444;
}

float + overflow

  • 优点：代码简单，容易理解，无需关注定宽的宽度，利用 BFC 达到自适应效果
  • 缺点：浮动脱离文档流，需要手动清除浮动，否则会产生高度塌陷；不支持 IE6
float + overflow 左列定宽，右列自适应
<div class="container">
  <div class="left">左侧定宽</div>
  <div class="right">右侧自适应</div>
</div>
.container {
  height: 100px;
  font-weight: bold;
  color: #fff;
}

.left {
  float: left;
  width: 100px;
  height: 100%;
  background-color: #3eaf7c;
}

.right {
  height: 100%;
  overflow: hidden; /* 触发bfc达到自适应 */
  background-color: #f2a444;
}

position

position 左列定宽，右列自适应
<div class="container">
  <div class="left">左侧定宽</div>
  <div class="right">右侧自适应</div>
</div>
.container {
  position: relative;
  height: 100px;
  font-weight: bold;
  color: #fff;
}

.left {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100%;
  background-color: #3eaf7c;
}

.right {
  position: absolute;
  top: 0;
  right: 0;
  /*值大于等于左列的宽度*/
  left: 100px;
  height: 100%;
  background-color: #f2a444;
}

Flex

flex 左列定宽，右列自适应
<div class="container">
  <div class="left">左侧定宽</div>
  <div class="right">右侧自适应</div>
</div>
.container {
  display: flex;
  width: 100%;
  height: 100px;
  font-weight: bold;
  color: #fff;
}

.left {
  width: 100px;
  background-color: #3eaf7c;
}

.right {
  /* 均分父元素剩余空间 */
  flex: 1;
  background-color: #f2a444;
}

Grid

grid 左列定宽，右列自适应
  <div class="container">
    <div class="left">左侧定宽</div>
    <div class="right">右侧自适应</div>
  </div>
.container {
  display: grid;
  /* 设定2列, auto 可以设置为 1fr */
  grid-template-columns: 100px auto;
  width: 100%;
  height: 100px;
  font-weight: bold;
  color: #fff;
}

.left {
  background-color: #3eaf7c;
}

.right {
  background-color: #f2a444;
}

table

  • 优点：代码简单，容易理解，无需关注定宽的宽度，利用单元格自动分配达到自适应效果
  • 缺点：margin 失效；设置间隔比较麻烦；不支持 IE8-
table 左列定宽，右列自适应
<div class="container">
  <div class="left">左侧定宽</div>
  <div class="right">右侧自适应</div>
</div>
.container {
  display: table;
  width: 100%;
  height: 100px;
  font-weight: bold;
  color: #fff;
}

.left, .right {
  /* 利用单元格自动分配宽度 */
  display: table-cell;
}

.left {
  width: 100px;
  background-color: #3eaf7c;
}

.right {
  background-color: #f2a444;
}

左列自适应，右列定宽

float + margin

float + margin 左列自适应，右列定宽
<div class="container">
  <div class="left">左侧自适应</div>
  <div class="right">右侧定宽</div>
</div>
.container {
  height: 100px;
  /* 抵消左侧的 margin-left 以达到父元素水平居中 */
  padding-left: 100px;
  font-weight: bold;
  color: #fff;
}

.left {
  float: left;
  /* 正值等于右侧的宽度 */
  margin-left: -100px;
  width: 100%;
  height: 100%;
  background-color: #3eaf7c;
}

.right {
  float: right;
  width: 100px;
  height: 100%;
  background-color: #f2a444;
}

float + overflow

float + overflow 左列自适应，右列定宽
<div class="container">
  <!-- 顺序需要换一下 -->
  <div class="right">右侧定宽</div>
  <div class="left">左侧自适应</div>
</div>
.container {
  height: 100px;
  font-weight: bold;
  color: #fff;
}

.left {
  overflow: hidden; /* 触发BFC */
  height: 100%;
  background-color: #3eaf7c;
}

.right {
  float: right;
  /* margin需要定义在右列中 */
  margin-left: 0px;
  width: 100px;
  height: 100%;
  background-color: #f2a444;
}

position

position 左列自适应，右列定宽
<div class="container">
  <div class="left">左侧自适应</div>
  <div class="right">右侧定宽</div>
</div>
.container {
  position: relative;
  height: 100px;
  font-weight: bold;
  color: #fff;
}

.left {
  position: absolute;
  top: 0;
  left: 0;
  right: 100px;
  height: 100%;
  background-color: #3eaf7c;
}

.right {
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
  height: 100%;
  background-color: #f2a444;
}

Flex

flex 左列自适应，右列定宽
<div class="container">
  <div class="left">左侧自适应</div>
  <div class="right">右侧定宽</div>
</div>
.container {
  display: flex;
  height: 100px;
  font-weight: bold;
  color: #fff;
}

.left {
  flex: 1;
  background-color: #3eaf7c;
}

.right {
  width: 100px;
  background-color: #f2a444;
}

Grid

grid 左列自适应，右列定宽
<div class="container">
  <div class="left">左侧自适应</div>
  <div class="right">右侧定宽</div>
</div>
.container {
  display: grid;
  /* 设定2列, auto 可换成 1fr */
  grid-template-columns: auto 100px;
  height: 100px;
  font-weight: bold;
  color: #fff;
}

.left {
  background-color: #3eaf7c;
}

.right {
  background-color: #f2a444;
}

一列不定，一列自适应

float + overflow

float + overflow 一列不定，一列自适应
<div class="container">
  <div class="left">左侧不定宽</div>
  <div class="right">右侧自适应</div>
</div>
.container {
  height: 100px;
  font-weight: bold;
  color: #fff;
}

.left {
  /* 只设置浮动,不设宽度 */
  float: left;
  height: 100%;
  margin-right: 10px;
  background-color: #3eaf7c;
}

.right {
  /* 触发BFC */
  overflow: hidden;
  height: 100%;
  background-color: #f2a444;
}

Flex

flex 一列不定，一列自适应
<div class="container">
  <div class="left">左侧不定宽</div>
  <div class="right">右侧自适应</div>
</div>
.container {
  display: flex;
  height: 100px;
  font-weight: bold;
  color: #fff;
}

.left {
  height: 100%;
  margin-right: 10px;
  background-color: #3eaf7c;
}

.right {
  flex: 1;
  height: 100%;
  background-color: #f2a444;
}

Grid

grid 一列不定，一列自适应
<div class="container">
  <div class="left">左侧不定宽</div>
  <div class="right">右侧自适应</div>
</div>
.container {
  display: grid;
  /* 左列不定宽,右列自适应 */
  grid-template-columns: auto 1fr;
  /* 左列自适应,右列不定宽 */
  /* grid-template-columns: 1fr auto; */
  height: 100px;
  font-weight: bold;
  color: #fff;
}

.left {
  height: 100%;
  margin-right: 10px;
  background-color: #3eaf7c;
}

.right {
  height: 100%;
  background-color: #f2a444;
}

三列布局

两列定宽，右列自适应

float + margin

float + margin 两列定宽，右列自适应
<div class="container">
  <div class="left">左侧定宽</div>
  <div class="center">中间定宽</div>
  <div class="right">右侧自适应</div>
</div>
.container {
  /* 100+10+200,防止宽度不够,子元素换行 */
  min-width: 310px;
  height: 100px;
  font-weight: bold;
  color: #fff;
}

.left {
  float: left;
  width: 100px;
  height: 100%;
  /* 左侧与中间间隔 */
  margin-right: 10px;
  background-color: #3eaf7c;
}

.center {
  float: left;
  width: 200px;
  height: 100%;
  background-color: #59a7d1;
}

.right {
  /* 等于左侧和中间的宽度之和加上间隔,多出来的就是右侧和中间的间隔 */
  margin-left: 320px;
  height: 100%;
  background-color: #f2a444;
}

float + overflow

  • 优点：代码简单，容易理解，无需关注定宽的宽度，利用 BFC 达到自适应效果
  • 缺点：浮动脱离文档流，需要手动清除浮动，否则会产生高度塌陷；不支持 IE6
float + overflow 两列定宽，右列自适应
<div class="container">
  <div class="left">左侧定宽</div>
  <div class="center">中间定宽</div>
  <div class="right">右侧自适应</div>
</div>
.container {
  /* 100+10+200+20,防止宽度不够,子元素换行 */
  min-width: 320px;
  font-weight: bold;
  color: #fff;
}

.left {
  width: 100px;
  height: 100px;
  float: left;
  margin-right: 10px; /* 左侧与中间间隔 */
  background-color: #3eaf7c;
}

.center {
  width: 200px;
  height: 100px;
  float: left;
  margin-right: 10px; /*在此定义和右侧的间隔*/
  background-color: #59a7d1;
}

.right {
  overflow: hidden; /* 触发BFC */
  height: 100px;
  background-color: #f2a444;
}

flex

flex 两列定宽，右列自适应
<div class="container">
  <div class="left">左侧定宽</div>
  <div class="center">中间定宽</div>
  <div class="right">右侧自适应</div>
</div>
.container {
  display: flex;
  height: 100px;
  font-weight: bold;
  color: #fff;
}

.left {
  width: 100px;
  margin-right: 10px;
  background-color: #3eaf7c;
}

.center {
  width: 200px;
  margin-right: 10px;
  background-color: #59a7d1;
}

.right {
  flex: 1;
  background-color: #f2a444;
}

table

  • 优点：代码简单，容易理解，无需关注定宽的宽度，利用单元格自动分配达到自适应效果
  • 缺点：margin 失效；设置间隔比较麻烦；不支持 IE8-
table 两列定宽，右列自适应
<div class="container">
  <div class="left">左侧定宽</div>
  <div class="center">中间定宽</div>
  <div class="right">右侧自适应</div>
</div>
.container {
  display: table;
  width: 100%;
  /* 抵消上下间距 10*2 的高度影响 */
  height: 120px;
  /* 抵消上下边间距10的位置影响 */
  margin: -10px 0;
  /* 左右两边间距大了一点,子元素改用padding设置盒子间距就没有这个问题 */
  border-spacing: 10px; /* 关键!!!设置间距 */
  font-weight: bold;
  color: #fff;
}

.left {
  display: table-cell;
  width: 100px;
  background-color: #3eaf7c;
}

.center {
  display: table-cell;
  width: 200px;
  background-color: #59a7d1;
}

.right {
  display: table-cell;
  background-color: #f2a444;
}

两侧定宽，中间自适应

position

  • 优点：容易理解，兼容性比较好
  • 缺点：需手动计算宽度确定边距；脱离文档流；代码繁多
position 两侧定宽，中间自适应
<div class="container">
  <div class="left">左侧定宽</div>
  <div class="center">中间自适应</div>
  <div class="right">右侧定宽</div>
</div>
.container {
  position: relative;
  height: 100px;
  font-weight: bold;
  color: #fff;
}

.left {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100%;
  background-color: #3eaf7c;
}

.center {
  height: 100%;
  /* 大于等于左侧的宽度,或者给父元素添加同样大小的 padding-left */
  margin-left: 100px;
  /* 大于等于右侧的宽度,或者给父元素添加同样大小的padding-right*/
  margin-right: 200px;
  background-color: #59a7d1;
}

.right {
  position: absolute;
  top: 0;
  right: 0;
  width: 200px;
  height: 100%;
  background-color: #f2a444;
}

Flex

flex 两侧定宽，中间自适应
<div class="container">
  <div class="left">左侧定宽</div>
  <div class="center">中间自适应</div>
  <div class="right">右侧定宽</div>
</div>
.container {
  display: flex;
  height: 100px;
  font-weight: bold;
  color: #fff;
}

.left {
  width: 100px;
  background-color: #3eaf7c;
}

.center {
  flex: 1;
  background-color: #59a7d1;
}

.right {
  width: 200px;
  background-color: #f2a444;
}

Grid

grid 两侧定宽，中间自适应
<div class="container">
  <div class="header">头部</div>
  <!--中间栏需要放在前面-->
  <div class="center">中间自适应</div>
  <div class="left">左侧定宽</div>
  <div class="right">右侧定宽</div>
  <div class="footer">底部</div>
</div>
.container {
  height: 200px;
  display: grid;
  grid-template-columns: 100px auto 200px; /* 设定3列 */
  grid-template-rows: 50px auto 50px; /* 设定3行 */
  /*设置网格区域分布*/
  grid-template-areas:
    'header header header'
    'leftside main rightside'
    'footer footer footer';
  color: #fff;
  font-weight: bold;
}

.header {
  grid-area: header; /* 指定在哪个网格区域 */
  background-color: #db6f53;
}

.left {
  grid-area: leftside; /* 指定在哪个网格区域 */
  background-color: #3eaf7c;
}

.center {
  grid-area: main; /* 指定在哪个网格区域 */
  margin: 0 15px; /* 设置间隔 */
  background-color: #59a7d1;
}

.right {
  grid-area: rightside; /* 指定在哪个网格区域 */
  background-color: #f2a444;
}

.footer {
  grid-area: footer; /* 指定在哪个网格区域 */
  background-color: #818c94;
}

table

table 两侧定宽，中间自适应
<div class="container">
  <div class="left">左侧定宽</div>
  <div class="center">中间自适应</div>
  <div class="right">右侧定宽</div>
</div>
.container {
  display: table;
  width: 100%;
  height: 100px;
  font-weight: bold;
  color: #fff;
}

.left {
  display: table-cell;
  width: 100px;
  background-color: #3eaf7c;
}

.center {
  display: table-cell;
  background-color: #59a7d1;
}

.right {
  display: table-cell;
  width: 200px;
  background-color: #f2a444;
}

双飞翼布局（两侧定宽，中间自适应）

双飞翼布局（两侧定宽，中间自适应）
<div class="container">
  <div class="header">头部</div>
  <div class="parent">
    <!--中间栏需要放在前面-->
    <div class="center">
      <div class="center_inbox">中间自适应</div>
      <!-- 方便观察原理 -->
      <!-- <hr> -->
    </div>
    <div class="left">左侧定宽</div>
    <div class="right">右侧定宽</div>
  </div>
  <div class="footer">底部</div>
</div>
.container {
  font-weight: bold;
  color: #fff;
}

.header {
  height: 50px;
  background-color: #db6f53;
}

.parent {
  height: 100px;
}

.parent .left {
  float: left;
  width: 100px;
  height: 100%;
  /*调整左侧的位置,值等于自身宽度*/
  margin-left: -100%;
  background-color: #3eaf7c;
}

.parent .center {
  float: left;
  width: 100%;
  height: 100%;
}

.center .center_inbox {
  height: 100%;
  /* 关键!!! 左右边界等于左右盒子的宽度,多出来的为盒子间隔 */
  margin: 0 210px 0 110px;
  background-color: #59a7d1;
}

.parent .right {
  float: left;
  width: 200px;
  height: 100%;
  /* 使右侧到指定的位置,值等于自身宽度 */
  margin-left: -200px;
  background-color: #f2a444;
}

.footer {
  clear: both; /* 注意清楚浮动!!! */
  height: 50px;
  background-color: #818c94;
}

圣杯布局（两侧定宽，中间自适应）

圣杯布局（两侧定宽，中间自适应）
<div class="container">
  <div class="header">头部</div>
  <div class="parent">
    <!--中间栏需要放在前面-->
    <div class="center">中间自适应</div>
    <div class="left">左侧定宽</div>
    <div class="right">右侧定宽</div>
  </div>
  <div class="footer">底部</div>
</div>
.container {
  color: #fff;
  font-weight: bold;
}

.header {
  height: 50px;
  background-color: #db6f53;
}

.parent {
  box-sizing: border-box;
  height: 100px;
  /* 为了使【中间】摆正,左右 padding 分别等于左右盒子的宽,可以结合左右盒子相对定位的 left 调整间距 */
  padding: 0 210px 0 110px;
}

.parent .left {
  float: left;
  position: relative;
  /* 相对定位调整【左侧】的位置,正值大于或等于自身宽度 */
  left: -110px;
  margin-left: -100%; /*使左侧上去一行*/
  width: 100px;
  height: 100%;
  background-color: #3eaf7c;
}

.parent .center {
  float: left;
  /* 由于父元素的 padding, 达到自适应的目的 */
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background-color: #59a7d1;
}

.parent .right {
  float: left;
  position: relative;
  /* 相对定位调整【右侧】的位置,大于或等于自身宽度 */
  left: 210px;
  width: 200px;
  height: 100%;
  margin-left: -200px; /* 使【右侧】上去一行 */
  background-color: #f2a444;
}

.footer {
  clear: both; /* 注意清楚浮动!!! */
  height: 50px;
  background-color: #818c94;
}

等宽布局

四列等宽

float

  • 优点：代码简单，容易理解；兼容性较好
  • 缺点：需要手动清除浮动，否则会产生高度塌陷
float 四列等宽
<div class="container">
  <div class="column">第01列</div>
  <div class="column">第02列</div>
  <div class="column">第03列</div>
  <div class="column">第04列</div>
  <div class="clear"></div>
</div>
.container {
  /* 使整体内容看起来居中,抵消 padding-left 的影响 */
  margin-left: -20px;
  /* height: 100px; */
  color: #fff;
  font-weight: bold;
}

.column {
  float: left;
  box-sizing: border-box;
  width: 25%;
  height: 100px;
  padding-left: 20px; /* 盒子的边距 */
  /* 背景色从内容开始绘制,方便观察 */
  background-clip: content-box;
}

.column:nth-child(odd) {
  background-color: #3eaf7c;
}

.column:nth-child(even) {
  background-color: #f2a444;
}

.clear {
  clear: both; /* 清除浮动 */
}

table

  • 优点：代码简单，容易理解；无需关注宽度，单元格自动等分
  • 缺点：margin 失效；设置间隔比较麻烦；不支持 IE 8-
table 四列等宽
<div class="container">
  <div class="column">第01列</div>
  <div class="column">第02列</div>
  <div class="column">第03列</div>
  <div class="column">第04列</div>
</div>
.container {
  display: table;
  width: 100%;
  /* 抵消上下边 20*2 间距的高度影响 */
  height: 140px;
  /* 抵消上下边 20*2 间距的位置影响 */
  margin: -20px 0;
  /* 两边离页面间距较大,改用子元素设置 padding 来当成间隔就不会有这样的问题 */
  border-spacing: 20px; /* 设置间距 */
  color: #fff;
  font-weight: bold;
}

.column {
  display: table-cell;
}

.column:nth-child(odd) {
  background-color: #3eaf7c;
}

.column:nth-child(even) {
  background-color: #f2a444;
}

flex

flex 四列等宽
<div class="container">
  <div class="column">第01列</div>
  <div class="column">第02列</div>
  <div class="column">第03列</div>
  <div class="column">第04列</div>
</div>
.container {
  width: 100%;
  margin-left: -15px; /* 使内容看起来居中 */
  height: 100px;
  display: flex;
  color: #fff;
  font-weight: bold;
}

.column {
  flex: 1; /* 一起平分父元素 */
  margin-left: 15px; /* 设置间距 */
}

.column:nth-child(odd) {
  background-color: #3eaf7c;
}

.column:nth-child(even) {
  background-color: #f2a444;
}

多列等宽

float

  • 优点：代码简单，容易理解；兼容性较好
  • 缺点：需要手动清除浮动，否则会产生高度塌陷
float 多列等宽
<div class="container">
  <div class="column">第01列</div>
  <div class="column">第02列</div>
  <div class="column">第03列</div>
  <div class="column">第04列</div>
  <div class="column">第05列</div>
  <div class="column">第06列</div>
  <div class="clear"></div>
</div>
.container {
  height: 100px;
  color: #fff;
  font-weight: bold;
}

.column {
  float: left; /* 添加浮动 */
  width: 16.66666666666667%; /* 100÷列数,得出百分比 */
  height: 100px;
}

.column:nth-child(odd) {
  background-color: #3eaf7c;
}

.column:nth-child(even) {
  background-color: #f2a444;
}

.clear {
  clear: both; /* 清除浮动 */
}

table

  • 优点：代码简单，容易理解；无需关注宽度，单元格自动等分
  • 缺点：margin 失效；设置间隔比较麻烦；不支持 IE 8-
table 多列等宽
<div class="container">
  <div class="column">第01列</div>
  <div class="column">第02列</div>
  <div class="column">第03列</div>
  <div class="column">第04列</div>
  <div class="column">第05列</div>
  <div class="column">第06列</div>
</div>
.container {
  display: table;
  width: 100%;
  height: 100px;
  color: #fff;
  font-weight: bold;
}

.column {
  display: table-cell;
}

.column:nth-child(odd) {
  background-color: #3eaf7c;
}

.column:nth-child(even) {
  background-color: #f2a444;
}

flex

flex 多列等宽
<div class="container">
  <div class="column">第01列</div>
  <div class="column">第02列</div>
  <div class="column">第03列</div>
  <div class="column">第04列</div>
  <div class="column">第05列</div>
  <div class="column">第06列</div>
</div>
.container {
  display: flex;
  height: 100px;
  color: #fff;
  font-weight: bold;
}

.column {
  flex: 1; /* 一起平分父元素 */
}

.column:nth-child(odd) {
  background-color: #3eaf7c;
}

.column:nth-child(even) {
  background-color: #f2a444;
}

Grid

grid 多列等宽
<div class="container">
  <div class="column">第01列</div>
  <div class="column">第02列</div>
  <div class="column">第03列</div>
  <div class="column">第04列</div>
  <div class="column">第05列</div>
  <div class="column">第06列</div>
</div>
.container {
  display: grid;
  /* repeat(6, 1fr) 重复 6 次 1fr ， 共 6 列 */
  grid-template-columns: repeat(6, 1fr);
  height: 100px;
  color: #fff;
  font-weight: bold;
}

.column:nth-child(odd) {
  background-color: #3eaf7c;
}

.column:nth-child(even) {
  background-color: #f2a444;
}

等高布局

float + overflow

float + overflow 等高布局
<div class="container">
  <div class="left">左侧内容</div>
  <div class="right">
    <div>右侧内容01</div>
    <div>右侧内容02</div>
    <div>右侧内容03</div>
    <div>右侧内容04</div>
  </div>
</div>
.container {
  overflow: hidden;
  color: #fff;
  font-weight: bold;
}

.left, .right {
  padding-bottom: 9999px;
  margin-bottom: -9999px;
}

.left {
  float: left;
  width: 100px;
  background-color: #3eaf7c;
}

.right {
  overflow: hidden;
  background-color: #f2a444;
}

Flex

flex 等高布局
<div class="container">
  <div class="left">左侧内容</div>
  <div class="right">
    <div>右侧内容01</div>
    <div>右侧内容02</div>
    <div>右侧内容03</div>
    <div>右侧内容04</div>
  </div>
</div>
.container {
  display: flex;
  width: 100%;
  color: #fff;
  font-weight: bold;
}

.left {
  width: 100px;
  background-color: #3eaf7c;
}

.right {
  flex: 1;
  background-color: #f2a444;
}

table

table 等高布局
<div class="container">
  <div class="left">左侧内容</div>
  <div class="right">
    <div>右侧内容01</div>
    <div>右侧内容02</div>
    <div>右侧内容03</div>
    <div>右侧内容04</div>
  </div>
</div>
.container {
  display: table;
  width: 100%;
  color: #fff;
  font-weight: bold;
}

.left {
  display: table-cell;
  width: 100px;
  margin-right: 20px;
  background-color: #3eaf7c;
}

.right {
  display: table-cell;
  background-color: #f2a444;
}

九宫格布局

table

  • 优点：代码简洁，容易理解；
  • 缺点：margin 失效，采用 border-spacing 表格两边的间隔无法消除；不支持 IE8-
table 九宫格布局
<div class="container">
  <div class="row">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
  <div class="row">
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
  </div>
  <div class="row">
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
  </div>
</div>
.container {
  display: table;
  margin: 0 auto;
  width: 100%;
  height: 100px;
  color: #fff;
  font-weight: bold;
}

.row {
  display: table-row;
}

.row .item {
  display: table-cell;
  border: 1px solid #fff;
  background-color: #3eaf7c;
}

Flex

flex 九宫格布局
<div class="container">
  <div class="row">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
  <div class="row">
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
  </div>
  <div class="row">
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
  </div>
</div>
.container {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  width: 100%;
  height: 100px;
  color: #fff;
  font-weight: bold;
}

.row {
  display: flex;
  flex: 1;
}

.row .item {
  flex: 1;
  border: 1px solid #fff;
  background-color: #3eaf7c;
}

Grid

grid 九宫格布局
<div class="container">
  <div class="row">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
  <div class="row">
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
  </div>
  <div class="row">
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
  </div>
</div>
.container {
  display: grid;
  /* 等同于 1fr 1fr 1fr, 此为重复的合并写法 */
  grid-template-columns: repeat(3, 1fr); 
  grid-template-rows: repeat(3, 1fr);
  margin: 0 auto;
  width: 100%;
  height: 100px;
  color: #fff;
  font-weight: bold;
}

.row .item {
  border: 1px solid #fff;
  background-color: #3eaf7c;
}

贡献者

lrh21glingronghailrh
最近更新：
知足且上进，温柔而坚定
Copyright © 2025 Mr.LRH