跳至主要內容

多列布局

Mr.LRH2021年3月26日CSS布局CSS大约 18 分钟

多列布局

两列布局

左列定宽，右列自适应

float + margin

<template>
  <div class="parent-float-margin-leftfixed-rightadaptive">
    <div class="left">左侧定宽</div>
    <div class="right">右侧自适应</div>
  </div>
</template>

<script>
export default {}
</script>

<style>
.parent-float-margin-leftfixed-rightadaptive .left {
  float: left;
  width: 100px;
  height: 100px;
  font-weight: bold;
  color: #fff;
  background-color: #3eaf7c;
}

.parent-float-margin-leftfixed-rightadaptive .right {
  height: 100px;
  margin-left: 100px; /* 大于等于左侧宽度 */
  font-weight: bold;
  color: #fff;
  background-color: #f2a444;
}
</style>

float + margin(fix)

<template>
  <div class="parent-float-margin-fix-leftfixed-rightadaptive">
    <div class="left">左侧定宽</div>
    <div class="right-fix">
      <div class="right">右侧自适应</div>
    </div>
  </div>
</template>

<script>
export default {}
</script>

<style>
.parent-float-margin-fix-leftfixed-rightadaptive .left {
  float: left;
  width: 100px;
  height: 100px;
  font-weight: bold;
  color: #fff;
  background-color: #3eaf7c;
}

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

.parent-float-margin-fix-leftfixed-rightadaptive .right {
  height: 100px;
  margin-left: 100px; /* 大于等于左侧宽度 */
  font-weight: bold;
  color: #fff;
  background-color: #f2a444;
}
</style>

float + overflow

  • 优点：代码简单，容易理解，无需关注定宽的宽度，利用 BFC 达到自适应效果
  • 缺点：浮动脱离文档流，需要手动清除浮动，否则会产生高度塌陷；不支持 IE6
<template>
  <div class="parent-float-overflow-leftfixed-rightadaptive">
    <div class="left">左侧定宽</div>
    <div class="right">右侧自适应</div>
  </div>
</template>

<script>
export default {}
</script>

<style>
.parent-float-overflow-leftfixed-rightadaptive .left {
  float: left;
  width: 100px;
  height: 100px;
  font-weight: bold;
  color: #fff;
  background-color: #3eaf7c;
}

.parent-float-overflow-leftfixed-rightadaptive .right {
  height: 100px;
  overflow: hidden; /* 触发bfc达到自适应 */
  font-weight: bold;
  color: #fff;
  background-color: #f2a444;
}
</style>

position

<template>
  <div class="parent-position-leftfixed-rightadaptive">
    <div class="left">左侧定宽</div>
    <div class="right">右侧自适应</div>
  </div>
</template>

<script>
export default {}
</script>

<style>
.parent-position-leftfixed-rightadaptive {
  position: relative;
  height: 100px;
}

.parent-position-leftfixed-rightadaptive .left {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  font-weight: bold;
  color: #fff;
  background-color: #3eaf7c;
}

.parent-position-leftfixed-rightadaptive .right {
  position: absolute;
  top: 0;
  right: 0;
  left: 100px; /*值大于等于左列的宽度*/
  height: 100px;
  font-weight: bold;
  color: #fff;
  background-color: #f2a444;
}
</style>

Flex

<template>
  <div class="parent-flex-leftfixed-rightadaptive">
    <div class="left">左侧定宽</div>
    <div class="right">右侧自适应</div>
  </div>
</template>

<script>
export default {}
</script>

<style>
.parent-flex-leftfixed-rightadaptive {
  width: 100%;
  height: 100px;
  display: flex;
}

.parent-flex-leftfixed-rightadaptive .left {
  width: 100px;
  font-weight: bold;
  color: #fff;
  background-color: #3eaf7c;
}

.parent-flex-leftfixed-rightadaptive .right {
  flex: 1; /* 均分父元素剩余空间 */
  font-weight: bold;
  color: #fff;
  background-color: #f2a444;
}
</style>

Grid

<template>
  <div class="parent-grid-leftfixed-rightadaptive">
    <div class="left">左侧定宽</div>
    <div class="right">右侧自适应</div>
  </div>
</template>

<script>
export default {}
</script>

<style>
.parent-grid-leftfixed-rightadaptive {
  width: 100%;
  height: 100px;
  display: grid;
  grid-template-columns: 100px auto; /* 设定2列, auto 可以设置为 1fr */
}

.parent-grid-leftfixed-rightadaptive .left {
  font-weight: bold;
  color: #fff;
  background-color: #3eaf7c;
}

.parent-grid-leftfixed-rightadaptive .right {
  font-weight: bold;
  color: #fff;
  background-color: #f2a444;
}
</style>

table

  • 优点：代码简单，容易理解，无需关注定宽的宽度，利用单元格自动分配达到自适应效果
  • 缺点：margin 失效；设置间隔比较麻烦；不支持 IE8-
<template>
  <div class="parent-table-leftfixed-rightadaptive">
    <div class="left">左侧定宽</div>
    <div class="right">右侧自适应</div>
  </div>
</template>

<script>
export default {}
</script>

<style>
.parent-table-leftfixed-rightadaptive {
  width: 100%;
  height: 100px;
  display: table;
}

.parent-table-leftfixed-rightadaptive .left {
  width: 100px;
  font-weight: bold;
  color: #fff;
  background-color: #3eaf7c;
}

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

.parent-table-leftfixed-rightadaptive .right {
  font-weight: bold;
  color: #fff;
  background-color: #f2a444;
}
</style>

左列自适应，右列定宽

float + margin

<template>
  <div class="parent-float-margin-leftadaptive-rightfixed">
    <div class="left">左侧自适应</div>
    <div class="right">右侧定宽</div>
  </div>
</template>

<script>
export default {}
</script>

<style>
.parent-float-margin-leftadaptive-rightfixed {
  height: 100px;
  /* 抵消左侧的 margin-left 以达到父元素水平居中 */
  padding-left: 100px;
}

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

.parent-float-margin-leftadaptive-rightfixed .right {
  width: 100px;
  height: 100px;
  float: right;
  font-weight: bold;
  color: #fff;
  background-color: #f2a444;
}
</style>

float + overflow

<template>
  <div class="parent-float-overflow-leftadaptive-rightfixed">
    <!-- 顺序需要换一下 -->
    <div class="right">右侧定宽</div>
    <div class="left">左侧自适应</div>
  </div>
</template>

<script>
export default {}
</script>

<style>
.parent-float-overflow-leftadaptive-rightfixed .left {
  overflow: hidden; /* 触发BFC */
  height: 100px;
  font-weight: bold;
  color: #fff;
  background-color: #3eaf7c;
}

.parent-float-overflow-leftadaptive-rightfixed .right {
  margin-left: 10px; /* margin需要定义在右列中 */
  float: right;
  width: 100px;
  height: 100px;
  font-weight: bold;
  color: #fff;
  background-color: #f2a444;
}
</style>

position

<template>
  <div class="parent-position-leftadaptive-rightfixed">
    <div class="left">左侧自适应</div>
    <div class="right">右侧定宽</div>
  </div>
</template>

<script>
export default {}
</script>

<style>
.parent-position-leftadaptive-rightfixed {
  position: relative;
  height: 100px;
}

.parent-position-leftadaptive-rightfixed .left {
  position: absolute;
  top: 0;
  left: 0;
  right: 100px;
  height: 100px;
  font-weight: bold;
  color: #fff;
  background-color: #3eaf7c;
}

.parent-position-leftadaptive-rightfixed .right {
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
  height: 100px;
  font-weight: bold;
  color: #fff;
  background-color: #f2a444;
}
</style>

Flex

<template>
  <div class="parent-flex-leftadaptive-rightfixed">
    <div class="left">左侧自适应</div>
    <div class="right">右侧定宽</div>
  </div>
</template>

<script>
export default {}
</script>

<style>
.parent-flex-leftadaptive-rightfixed {
  display: flex;
  height: 100px;
}

.parent-flex-leftadaptive-rightfixed .left {
  flex: 1;
  font-weight: bold;
  color: #fff;
  background-color: #3eaf7c;
}

.parent-flex-leftadaptive-rightfixed .right {
  width: 100px;
  font-weight: bold;
  color: #fff;
  background-color: #f2a444;
}
</style>

Grid

<template>
  <div class="parent-grid-leftadaptive-rightfixed">
    <div class="left">左侧自适应</div>
    <div class="right">右侧定宽</div>
  </div>
</template>

<script>
export default {}
</script>

<style>
.parent-grid-leftadaptive-rightfixed {
  display: grid;
  grid-template-columns: auto 100px; /* 设定2列, auto 可换成 1fr */
  height: 100px;
}

.parent-grid-leftadaptive-rightfixed .left {
  font-weight: bold;
  color: #fff;
  background-color: #3eaf7c;
}

.parent-grid-leftadaptive-rightfixed .right {
  font-weight: bold;
  color: #fff;
  background-color: #f2a444;
}
</style>

一列不定，一列自适应

float + overflow

<template>
  <div class="parent-float-overflow-leftnofixed-rightadaptive">
    <div class="left">左侧不定宽</div>
    <div class="right">右侧自适应</div>
  </div>
</template>

<script>
export default {}
</script>

<style>
.parent-float-overflow-leftnofixed-rightadaptive .left {
  height: 100px;
  margin-right: 10px;
  float: left; /* 只设置浮动,不设宽度 */
  font-weight: bold;
  color: #fff;
  background-color: #3eaf7c;
}

.parent-float-overflow-leftnofixed-rightadaptive .right {
  overflow: hidden; /* 触发BFC */
  height: 100px;
  font-weight: bold;
  color: #fff;
  background-color: #f2a444;
}
</style>

Flex

<template>
  <div class="parent-flex-leftnofixed-rightadaptive">
    <div class="left">左侧不定宽</div>
    <div class="right">右侧自适应</div>
  </div>
</template>

<script>
export default {}
</script>

<style>
.parent-flex-leftnofixed-rightadaptive {
  display: flex;
}

.parent-flex-leftnofixed-rightadaptive .left {
  height: 100px;
  margin-right: 10px;
  font-weight: bold;
  color: #fff;
  background-color: #3eaf7c;
}

.parent-flex-leftnofixed-rightadaptive .right {
  flex: 1;
  height: 100px;
  font-weight: bold;
  color: #fff;
  background-color: #f2a444;
}
</style>

Grid

<template>
  <div class="parent-grid-leftnofixed-rightadaptive">
    <div class="left">左侧不定宽</div>
    <div class="right">右侧自适应</div>
  </div>
</template>

<script>
export default {}
</script>

<style>
.parent-grid-leftnofixed-rightadaptive {
  display: grid;
  /* 左列不定宽,右列自适应 */
  grid-template-columns: auto 1fr;
  /* 左列自适应,右列不定宽 */
  /* grid-template-columns: 1fr auto; */
}

.parent-grid-leftnofixed-rightadaptive .left {
  height: 100px;
  margin-right: 10px;
  font-weight: bold;
  color: #fff;
  background-color: #3eaf7c;
}

.parent-grid-leftnofixed-rightadaptive .right {
  height: 100px;
  font-weight: bold;
  color: #fff;
  background-color: #f2a444;
}
</style>

三列布局

两列定宽，右列自适应

float + margin

<template>
  <div class="parent-float-margin-leftfixed-centerfixed-rightadaptive">
    <div class="left">左侧定宽</div>
    <div class="center">中间定宽</div>
    <div class="right">右侧自适应</div>
  </div>
</template>

<script>
export default {}
</script>

<style>
.parent-float-margin-leftfixed-centerfixed-rightadaptive {
  min-width: 310px; /* 100+10+200,防止宽度不够,子元素换行 */
}

.parent-float-margin-leftfixed-centerfixed-rightadaptive .left {
  width: 100px;
  height: 100px;
  float: left;
  margin-right: 10px; /* 左侧与中间间隔 */
  font-weight: bold;
  color: #fff;
  background-color: #3eaf7c;
}

.parent-float-margin-leftfixed-centerfixed-rightadaptive .center {
  width: 200px;
  height: 100px;
  float: left;
  font-weight: bold;
  color: #fff;
  background-color: #59a7d1;
}

.parent-float-margin-leftfixed-centerfixed-rightadaptive .right {
  margin-left: 320px;
  /* 等于左侧和中间的宽度之和加上间隔,多出来的就是右侧和中间的间隔 */
  height: 100px;
  font-weight: bold;
  color: #fff;
  background-color: #f2a444;
}
</style>

float + overflow

  • 优点：代码简单，容易理解，无需关注定宽的宽度，利用 BFC 达到自适应效果
  • 缺点：浮动脱离文档流，需要手动清除浮动，否则会产生高度塌陷；不支持 IE6
<template>
  <div class="parent-float-overflow-leftfixed-centerfixed-rightadaptive">
    <div class="left">左侧定宽</div>
    <div class="center">中间定宽</div>
    <div class="right">右侧自适应</div>
  </div>
</template>

<script>
export default {}
</script>

<style>
.parent-float-overflow-leftfixed-centerfixed-rightadaptive {
  min-width: 320px; /* 100+10+200+20,防止宽度不够,子元素换行 */
}

.parent-float-overflow-leftfixed-centerfixed-rightadaptive .left {
  width: 100px;
  height: 100px;
  float: left;
  margin-right: 10px; /* 左侧与中间间隔 */
  font-weight: bold;
  color: #fff;
  background-color: #3eaf7c;
}

.parent-float-overflow-leftfixed-centerfixed-rightadaptive .center {
  width: 200px;
  height: 100px;
  float: left;
  margin-right: 10px; /*在此定义和右侧的间隔*/
  font-weight: bold;
  color: #fff;
  background-color: #59a7d1;
}

.parent-float-overflow-leftfixed-centerfixed-rightadaptive .right {
  overflow: hidden; /* 触发BFC */
  height: 100px;
  font-weight: bold;
  color: #fff;
  background-color: #f2a444;
}
</style>

flex

<template>
  <div class="parent-float-overflow-leftfixed-centerfixed-rightadaptive">
    <div class="left">左侧定宽</div>
    <div class="center">中间定宽</div>
    <div class="right">右侧自适应</div>
  </div>
</template>

<script>
export default {}
</script>

<style>
.parent-float-overflow-leftfixed-centerfixed-rightadaptive {
  display: flex;
  height: 100px;
}

.parent-float-overflow-leftfixed-centerfixed-rightadaptive .left {
  margin-right: 10px;
  font-weight: bold;
  color: #fff;
  background-color: #3eaf7c;
}

.parent-float-overflow-leftfixed-centerfixed-rightadaptive .center {
  margin-right: 10px;
  width: 200px;
  font-weight: bold;
  color: #fff;
  background-color: #59a7d1;
}

.parent-float-overflow-leftfixed-centerfixed-rightadaptive .right {
  flex: 1;
  font-weight: bold;
  color: #fff;
  background-color: #f2a444;
}
</style>

table

  • 优点：代码简单，容易理解，无需关注定宽的宽度，利用单元格自动分配达到自适应效果
  • 缺点：margin 失效；设置间隔比较麻烦；不支持 IE8-
<template>
  <div class="parent-table-leftfixed-centerfixed-rightadaptive">
    <div class="left">左侧定宽</div>
    <div class="center">中间定宽</div>
    <div class="right">右侧自适应</div>
  </div>
</template>

<script>
export default {}
</script>

<style>
.parent-table-leftfixed-centerfixed-rightadaptive {
  width: 100%;
  height: 120px; /* 抵消上下间距 10*2 的高度影响 */
  margin: -10px 0; /* 抵消上下边间距10的位置影响 */
  display: table;
  /* 左右两边间距大了一点,子元素改用padding设置盒子间距就没有这个问题 */
  border-spacing: 10px; /* 关键!!!设置间距 */
}

.parent-table-leftfixed-centerfixed-rightadaptive .left {
  display: table-cell;
  width: 100px;
  font-weight: bold;
  color: #fff;
  background-color: #3eaf7c;
}

.parent-table-leftfixed-centerfixed-rightadaptive .center {
  display: table-cell;
  width: 200px;
  font-weight: bold;
  color: #fff;
  background-color: #59a7d1;
}

.parent-table-leftfixed-centerfixed-rightadaptive .right {
  display: table-cell;
  font-weight: bold;
  color: #fff;
  background-color: #f2a444;
}
</style>

两侧定宽，中间自适应

position

  • 优点：容易理解，兼容性比较好
  • 缺点：需手动计算宽度确定边距；脱离文档流；代码繁多
<template>
  <div class="parent-position-leftrightfixed-centeradaptive">
    <div class="left">左侧定宽</div>
    <div class="center">中间自适应</div>
    <div class="right">右侧定宽</div>
  </div>
</template>

<script>
export default {}
</script>

<style>
.parent-position-leftrightfixed-centeradaptive {
  position: relative;
  height: 100px;
}

.parent-position-leftrightfixed-centeradaptive .left {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  font-weight: bold;
  color: #fff;
  background-color: #3eaf7c;
}

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

.parent-position-leftrightfixed-centeradaptive .right {
  position: absolute;
  top: 0;
  right: 0;
  width: 200px;
  height: 100px;
  font-weight: bold;
  color: #fff;
  background-color: #f2a444;
}
</style>

Flex

<template>
  <div class="parent-flex-leftrightfixed-centeradaptive">
    <div class="left">左侧定宽</div>
    <div class="center">中间自适应</div>
    <div class="right">右侧定宽</div>
  </div>
</template>

<script>
export default {}
</script>

<style>
.parent-flex-leftrightfixed-centeradaptive {
  height: 100px;
  display: flex;
}

.parent-flex-leftrightfixed-centeradaptive .left {
  width: 100px;
  font-weight: bold;
  color: #fff;
  background-color: #3eaf7c;
}

.parent-flex-leftrightfixed-centeradaptive .center {
  flex: 1;
  font-weight: bold;
  color: #fff;
  background-color: #59a7d1;
}

.parent-flex-leftrightfixed-centeradaptive .right {
  width: 200px;
  font-weight: bold;
  color: #fff;
  background-color: #f2a444;
}
</style>

table

<template>
  <div class="parent-table-leftrightfixed-centeradaptive">
    <div class="left">左侧定宽</div>
    <div class="center">中间自适应</div>
    <div class="right">右侧定宽</div>
  </div>
</template>

<script>
export default {}
</script>

<style>
.parent-table-leftrightfixed-centeradaptive {
  width: 100%;
  height: 100px;
  display: table;
}

.parent-table-leftrightfixed-centeradaptive .left {
  display: table-cell;
  width: 100px;
  font-weight: bold;
  color: #fff;
  background-color: #3eaf7c;
}

.parent-table-leftrightfixed-centeradaptive .center {
  display: table-cell;
  font-weight: bold;
  color: #fff;
  background-color: #59a7d1;
}

.parent-table-leftrightfixed-centeradaptive .right {
  display: table-cell;
  width: 200px;
  font-weight: bold;
  color: #fff;
  background-color: #f2a444;
}
</style>

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

<template>
  <div class="parent-shuangfeiyi-leftrightfixed-centeradaptive">
    <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>
</template>

<script>
export default {}
</script>

<style>
.parent-shuangfeiyi-leftrightfixed-centeradaptive {
  color: #fff;
  font-weight: bold;
}

.parent-shuangfeiyi-leftrightfixed-centeradaptive .header {
  height: 50px;
  background-color: #db6f53;
}

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

.parent-shuangfeiyi-leftrightfixed-centeradaptive .parent .center {
  float: left;
  width: 100%;
  height: 100px;
}

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

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

.parent-shuangfeiyi-leftrightfixed-centeradaptive .footer {
  clear: both; /* 注意清楚浮动!!! */
  height: 50px;
  background-color: #818c94;
}
</style>

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

<template>
  <div class="parent-shengbei-leftrightfixed-centeradaptive">
    <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>
</template>

<script>
export default {}
</script>

<style>
.parent-shengbei-leftrightfixed-centeradaptive {
  color: #fff;
  font-weight: bold;
}

.parent-shengbei-leftrightfixed-centeradaptive .header {
  height: 50px;
  background-color: #db6f53;
}

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

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

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

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

.parent-shengbei-leftrightfixed-centeradaptive .footer {
  clear: both; /* 注意清楚浮动!!! */
  height: 50px;
  background-color: #818c94;
}
</style>

使用 Grid 实现两侧定宽，中间自适应

<template>
  <div class="parent-grid-leftrightfixed-centeradaptive">
    <div class="header">头部</div>
    <!--中间栏需要放在前面-->
    <div class="center">中间自适应</div>
    <div class="left">左侧定宽</div>
    <div class="right">右侧定宽</div>
    <div class="footer">底部</div>
  </div>
</template>

<script>
export default {}
</script>

<style>
.parent-grid-leftrightfixed-centeradaptive {
  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;
}

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

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

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

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

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

等宽布局

四列等宽

float

  • 优点：代码简单，容易理解；兼容性较好
  • 缺点：需要手动清除浮动，否则会产生高度塌陷
<template>
  <div class="parent-float-four-column-equal-width">
    <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>
</template>

<script>
export default {}
</script>

<style>
.parent-float-four-column-equal-width {
  /* 使整体内容看起来居中,抵消 padding-left 的影响 */
  margin-left: -20px;
  /* height: 100px; */
  color: #fff;
  font-weight: bold;
}

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

.parent-float-four-column-equal-width .column:nth-child(odd) {
  background-color: #3eaf7c;
}

.parent-float-four-column-equal-width .column:nth-child(even) {
  background-color: #f2a444;
}

.parent-float-four-column-equal-width .clear {
  clear: both; /* 清除浮动 */
}
</style>

table

  • 优点：代码简单，容易理解；无需关注宽度，单元格自动等分
  • 缺点：margin 失效；设置间隔比较麻烦；不支持 IE 8-
<template>
  <div class="parent-table-four-column-equal-width">
    <div class="column">第01列</div>
    <div class="column">第02列</div>
    <div class="column">第03列</div>
    <div class="column">第04列</div>
  </div>
</template>

<script>
export default {}
</script>

<style>
.parent-table-four-column-equal-width {
  width: 100%;
  height: 140px; /* 抵消上下边 20*2 间距的高度影响 */
  display: table;
  margin: -20px 0; /* 抵消上下边 20*2 间距的位置影响 */
  /* 两边离页面间距较大,改用子元素设置 padding 来当成间隔就不会有这样的问题 */
  border-spacing: 20px; /* 设置间距 */
  color: #fff;
  font-weight: bold;
}

.parent-table-four-column-equal-width .column {
  display: table-cell;
}

.parent-table-four-column-equal-width .column:nth-child(odd) {
  background-color: #3eaf7c;
}

.parent-table-four-column-equal-width .column:nth-child(even) {
  background-color: #f2a444;
}
</style>

flex

<template>
  <div class="parent-flex-four-column-equal-width">
    <div class="column">第01列</div>
    <div class="column">第02列</div>
    <div class="column">第03列</div>
    <div class="column">第04列</div>
  </div>
</template>

<script>
export default {}
</script>

<style>
.parent-flex-four-column-equal-width {
  width: 100%;
  margin-left: -15px; /* 使内容看起来居中 */
  height: 100px;
  display: flex;
  color: #fff;
  font-weight: bold;
}

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

.parent-flex-four-column-equal-width .column:nth-child(odd) {
  background-color: #3eaf7c;
}

.parent-flex-four-column-equal-width .column:nth-child(even) {
  background-color: #f2a444;
}
</style>

多列等宽

float

  • 优点：代码简单，容易理解；兼容性较好
  • 缺点：需要手动清除浮动，否则会产生高度塌陷
<template>
  <div class="parent-float-more-column-equal-width">
    <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>
</template>

<script>
export default {}
</script>

<style>
.parent-float-more-column-equal-width {
  height: 100px;
  color: #fff;
  font-weight: bold;
}

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

.parent-float-more-column-equal-width .column:nth-child(odd) {
  background-color: #3eaf7c;
}

.parent-float-more-column-equal-width .column:nth-child(even) {
  background-color: #f2a444;
}

.parent-float-more-column-equal-width .clear {
  clear: both; /* 清除浮动 */
}
</style>

table

  • 优点：代码简单，容易理解；无需关注宽度，单元格自动等分
  • 缺点：margin 失效；设置间隔比较麻烦；不支持 IE 8-
<template>
  <div class="parent-table-more-column-equal-width">
    <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>
</template>

<script>
export default {}
</script>

<style>
.parent-table-more-column-equal-width {
  width: 100%;
  height: 100px;
  display: table;
  color: #fff;
  font-weight: bold;
}

.parent-table-more-column-equal-width .column {
  display: table-cell;
}

.parent-table-more-column-equal-width .column:nth-child(odd) {
  background-color: #3eaf7c;
}

.parent-table-more-column-equal-width .column:nth-child(even) {
  background-color: #f2a444;
}
</style>

flex

<template>
  <div class="parent-flex-more-column-equal-width">
    <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>
</template>

<script>
export default {}
</script>

<style>
.parent-flex-more-column-equal-width {
  height: 100px;
  display: flex;
  color: #fff;
  font-weight: bold;
}

.parent-flex-more-column-equal-width .column {
  flex: 1; /* 一起平分父元素 */
}

.parent-flex-more-column-equal-width .column:nth-child(odd) {
  background-color: #3eaf7c;
}

.parent-flex-more-column-equal-width .column:nth-child(even) {
  background-color: #f2a444;
}
</style>

Grid

<template>
  <div class="parent-grid-more-column-equal-width">
    <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>
</template>

<script>
export default {}
</script>

<style>
.parent-grid-more-column-equal-width {
  height: 100px;
  display: grid;
  grid-template-columns: repeat(6, 1fr); /* 6是列数 */
  color: #fff;
  font-weight: bold;
}

.parent-grid-more-column-equal-width .column:nth-child(odd) {
  background-color: #3eaf7c;
}

.parent-grid-more-column-equal-width .column:nth-child(even) {
  background-color: #f2a444;
}
</style>

等高布局

float + overflow

<template>
  <div class="parent-float-more-column-equal-height">
    <div class="left">左侧内容</div>
    <div class="right">
      <div>右侧内容01</div>
      <div>右侧内容02</div>
      <div>右侧内容03</div>
      <div>右侧内容04</div>
    </div>
  </div>
</template>

<script>
export default {}
</script>

<style>
.parent-float-more-column-equal-height {
  overflow: hidden;
  color: #fff;
  font-weight: bold;
}

.parent-float-more-column-equal-height .left,
.parent-float-more-column-equal-height .right {
  padding-bottom: 9999px;
  margin-bottom: -9999px;
}

.parent-float-more-column-equal-height .left {
  float: left;
  width: 100px;
  background-color: #3eaf7c;
}

.parent-float-more-column-equal-height .right {
  overflow: hidden;
  background-color: #f2a444;
}
</style>

Flex

<template>
  <div class="parent-flex-more-column-equal-height">
    <div class="left">左侧内容</div>
    <div class="right">
      <div>右侧内容01</div>
      <div>右侧内容02</div>
      <div>右侧内容03</div>
      <div>右侧内容04</div>
    </div>
  </div>
</template>

<script>
export default {}
</script>

<style>
.parent-flex-more-column-equal-height {
  display: flex;
  width: 100%;
  color: #fff;
  font-weight: bold;
}

.parent-flex-more-column-equal-height .left {
  width: 100px;
  background-color: #3eaf7c;
}

.parent-flex-more-column-equal-height .right {
  flex: 1;
  background-color: #f2a444;
}
</style>

table

<template>
  <div class="parent-table-more-column-equal-height">
    <div class="left">左侧内容</div>
    <div class="right">
      <div>右侧内容01</div>
      <div>右侧内容02</div>
      <div>右侧内容03</div>
      <div>右侧内容04</div>
    </div>
  </div>
</template>

<script>
export default {}
</script>

<style>
.parent-table-more-column-equal-height {
  display: table;
  width: 100%;
  color: #fff;
  font-weight: bold;
}

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

.parent-table-more-column-equal-height .right {
  display: table-cell;
  background-color: #f2a444;
}
</style>

九宫格布局

table

  • 优点：代码简洁，容易理解；
  • 缺点：margin 失效，采用 border-spacing 表格两边的间隔无法消除；不支持 IE8-
<template>
  <div class="parent-table-jiugongge">
    <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>
</template>

<script>
export default {}
</script>

<style>
.parent-table-jiugongge {
  width: 100%;
  height: 100px;
  margin: 0 auto;
  display: table;
  color: #fff;
  font-weight: bold;
}

.parent-table-jiugongge .row {
  display: table-row;
}

.parent-table-jiugongge .row .item {
  display: table-cell;
  border: 1px solid #fff;
  background-color: #3eaf7c;
}
</style>

Flex

<template>
  <div class="parent-flex-jiugongge">
    <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>
</template>

<script>
export default {}
</script>

<style>
.parent-flex-jiugongge {
  width: 100%;
  height: 100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  color: #fff;
  font-weight: bold;
}

.parent-flex-jiugongge .row {
  display: flex;
  flex: 1;
}

.parent-flex-jiugongge .row .item {
  flex: 1;
  border: 1px solid #fff;
  background-color: #3eaf7c;
}
</style>

Grid

<template>
  <div class="parent-grid-jiugongge">
    <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>
</template>

<script>
export default {}
</script>

<style>
.parent-grid-jiugongge {
  width: 100%;
  height: 100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(
    3,
    1fr
  ); /* 等同于1fr 1fr 1fr,此为重复的合并写法 */
  grid-template-rows: repeat(3, 1fr);
  color: #fff;
  font-weight: bold;
}

.parent-grid-jiugongge .row .item {
  border: 1px solid #fff;
  background-color: #3eaf7c;
}
</style>
上次编辑于: 2023/9/18 09:43:49
贡献者: lrh21g,lingronghai,lrh21g
知足且上进，温柔而坚定
Copyright © 2025 Mr.LRH