实现三栏布局5种方式

最新推荐文章于 2022-07-01 14:38:52 发布

蛙哇

最新推荐文章于 2022-07-01 14:38:52 发布

阅读量267

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/weixin_44002432/article/details/103467715

版权

css 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

前言

前端开发中，布局是前端基础的内容，而其中三栏布局在实际开发和面试中最常见，三栏布局是指中间自适应两边固定宽，而我们经常使用的淘宝首页（pc端）就是典型的三栏布局实现的。下面总结了五种三栏布局方式，希望自己学习总结的同时对大家有所帮组。

1、左右浮动布局

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Layout</title>
  <style>
    .left {
      height: 150px;
      width: 300px;
      float: left;
      background: red;
    }
    .center {
      height: 150px;
      background: blue;
    }
    .right {
      width: 300px;
      height: 150px;
      float: right;
      background: yellow;
    }
  </style>
</head>
<body>
 <div class="container">
    <div class="left"></div>
    <div class="right"></div>
    <div class="center"></div>
  </div>
</body>
</html>

效果图：

这种布局方式，必须先写浮动部分，最后再写中间部分，否则右浮动块会掉到下一行。

浮动布局优点：就是比较简单，兼容性也比较好。
浮动布局缺点：具是有局限性的，浮动元素是脱离文档流，会带来很多问题，比如父容器高度塌陷等。

2、绝对定位布局

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Layout</title>
  <style>
    .left {
      position: absolute;
      height: 150px;
      width: 300px;
      left: 0;
      background: red;
    }
    .center {
      position: absolute;
      height: 150px;
      left: 300px;
      right: 300px;
      background: blue;
    }
    .right {
      position: absolute;
      right: 0;
      width: 300px;
      height: 150px;
      background: yellow;
    }
  </style>
</head>
<body>
 <div class="container">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
  </div>
</body>
</html>

绝对定位布局优点:快捷以及设置简单，而且也不容易出问题。
绝对定位布局缺点:容器脱离了文档流，后代元素也脱离了文档流，高度未知的时候，会有问题，这就导致了这种方法的有效性和可使用性是比较差的。

3、Flex布局

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Layout</title>
  <style>
    .container {
      display: flex;
    }
    .left {
      order: 1;
      width: 300px;
      background: red;
    }
    .center {
      flex: 1;
      order: 2;
      height: 150px;
      background: blue;
    }
    .right {
      width: 300px;
      order: 3;
      background: yellow;
    }
  </style>
</head>
<body>
  <div class="container">
     <div class="center"></div>
    <div class="left"></div>
    <div class="right"></div>
  </div>
</body>
</html>

需要注意要将中间块放在前面，通过order来控制位置，实际高度会根据内容自适应，三栏高度统一。

Flex布局的优点：在移动端比较常见，布局灵活，兼容性也还可以，基本能满足大多数需求。
Flex布局的缺点: IE10才开始支持

4、Grid布局

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Layout</title>
  <style>
    .container {
      display: grid;
      grid-template-columns: 300px auto 300px;
      grid-template-rows: 150px;
      width: 100%;
    }
    .left {
      background: red;
    }
    .center {
      background: blue;
    }
    .right {
      background: yellow;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
  </div>
</body>
</html>

Grid布局优点:创建网格布局最强大和最简单的工具。实际高度会根据内容自适应，三栏高度统一。
Grid布局缺点：唯一的缺点就是兼容性不太好。

5、表格布局

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Layout</title>
  <style>
    .container {
      display: table;
      height: 150px;
      width: 100%;
    }
    .left {
      display: table-cell;
      width: 300px;
      background: red;
    }
    .center {
      display: table-cell;
      background: blue;
    }
    .right {
      width: 300px;
      display: table-cell;
      background: yellow;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
  </div>
</body>
</html>

**表格布局优点：**兼容性很好，在Flex布局不兼容的时候（一般情况下很少不兼容），可以尝试表格布局。当内容溢出时会自动撑开父元素。

表格布局缺点:

无法设置栏边距
对seo不友好
当其中一个单元格高度超出的时候，两侧的单元格也是会跟着一起变高的，然而有时候这并不是我们想要的效果。

总结

现在相信大家一般都在使用Flex布局，三栏布局当然页推荐使用Flex布局，如果有不兼容Flex那就自行斟酌选择自己觉得合适的就ok。

蛙哇

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
实现三栏布局5种方式

前言前端开发中，布局是前端基础的内容，而其中三栏布局在实际开发和面试中最常见，三栏布局是指中间自适应两边固定宽，而我们经常使用的淘宝首页（pc端）就是典型的三栏布局实现的。下面总结了五种三栏布局方式，希望自己学习总结的同时对大家有所帮组。1、左右浮动布局<!DOCTYPE html><html lang="en"><head> <meta c...
复制链接

扫一扫