三栏布局实现多种方案比一比

2023-10-23 11:27:41

一、float 布局

float 布局是最简单的一种三栏布局方式，也是最早出现的一种布局方式。float 布局的原理是让元素浮动起来，然后利用元素的 margin 和 padding 属性来控制元素的位置。

<div class="container">
  <div class="left-column">左栏</div>
  <div class="middle-column">中栏</div>
  <div class="right-column">右栏</div>
</div>

.container {
  width: 100%;
}

.left-column,
.middle-column,
.right-column {
  float: left;
}

.left-column {
  width: 20%;
}

.middle-column {
  width: 60%;
}

.right-column {
  width: 20%;
}

二、flex 布局

flex 布局是 CSS3 中新引入的一种布局方式，它比 float 布局更灵活，更易于控制。flex 布局的原理是让元素在容器中按一定比例排列，然后利用 flex-grow、flex-shrink 和 flex-basis 属性来控制元素的尺寸。

<div class="container">
  <div class="left-column">左栏</div>
  <div class="middle-column">中栏</div>
  <div class="right-column">右栏</div>
</div>

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

.left-column,
.middle-column,
.right-column {
  flex-grow: 1;
}

.left-column {
  width: 20%;
}

.middle-column {
  width: 60%;
}

.right-column {
  width: 20%;
}

三、grid 布局

grid 布局是 CSS3 中新引入的另一种布局方式，它比 flex 布局更强大，更灵活。grid 布局的原理是将容器划分为多个网格单元，然后将元素放置在网格单元中。

<div class="container">
  <div class="left-column">左栏</div>
  <div class="middle-column">中栏</div>
  <div class="right-column">右栏</div>
</div>

.container {
  display: grid;
  grid-template-columns: 20% 60% 20%;
  width: 100%;
}

.left-column,
.middle-column,
.right-column {
  grid-column: span 1;
}

.middle-column {
  grid-column: span 2;
}

四、百分比布局

百分比布局是一种非常简单的三栏布局方式，它利用元素的 width 属性来控制元素的尺寸。

<div class="container">
  <div class="left-column">左栏</div>
  <div class="middle-column">中栏</div>
  <div class="right-column">右栏</div>
</div>

.container {
  width: 100%;
}

.left-column,
.middle-column,
.right-column {
  width: 33.33%;
  float: left;
}

五、固定宽度布局

固定宽度布局是一种非常简单的三栏布局方式，它利用元素的 width 属性来控制元素的尺寸。

<div class="container">
  <div class="left-column">左栏</div>
  <div class="middle-column">中栏</div>
  <div class="right-column">右栏</div>
</div>

.container {
  width: 100%;
}

.left-column,
.middle-column,
.right-column {
  width: 200px;
  float: left;
}

六、响应式布局

响应式布局是一种能够适应不同屏幕尺寸的布局方式。响应式布局利用媒体查询来控制元素的样式，从而实现不同的布局效果。

<div class="container">
  <div class="left-column">左栏</div>
  <div class="middle-column">中栏</div>
  <div class="right-column">右栏</div>
</div>

/* 大屏幕 */
@media screen and (min-width: 1200px) {
  .container {
    width: 100%;
  }

  .left-column,
  .middle-column,
  .right-column {
    width: 33.33%;
    float: left;
  }
}

/* 中屏幕 */
@media screen and (min-width: 768px) and (max-width: 1199px) {
  .container {
    width: 100%;
  }

  .left-column,
  .middle-column,
  .right-column {
    width: 50%;
    float: left;
  }
}

/* 小屏幕 */
@media screen and (max-width: 767px) {
  .container {
    width: 100%;
  }

  .left-column,
  .middle-column,
  .right-column {
    width: 100%;
    float: none;
  }
}