三栏布局的常用6种方式

最新推荐文章于 2022-10-27 19:58:11 发布

lululu_

最新推荐文章于 2022-10-27 19:58:11 发布

阅读量1.5k

点赞数 1

分类专栏： CSS 文章标签： css 前端 html

本文链接：https://blog.csdn.net/lululu_/article/details/125650382

版权

CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

三栏布局

三栏布局就是在网页上以平铺方式展现左中右三列布局，其特点在于，左右两列固定在网页两侧，中间一列永远居中，且当网页宽度大于左右两列宽度之和时，中间一列可随网页整体宽度的变化而变化，简单来说就是两端固定，中间自适应。
常用的主要有6种布局方式：浮动，绝对定位，flex，grid，圣杯布局和双飞翼布局

1.浮动

优点：简单，兼容性好
缺点：需要清除浮动，否则父元素的高度无法撑开，导致其他页面元素混乱

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>01-浮动</title>
  <style type="text/css">
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    .container {
        border: 1px solid black;
        overflow: hidden;
    }
    .left {
        border: 1px solid black;
        float: left;
        width: 100px;
    }
    .right {
        border: 1px solid black;
        float: right;
        width: 100px;
    }
    .center {
        margin: 0 100px;
    }
</style>
</head>
<body>
<section class="container">
    <article class="left">左边区域<br /><br /></article>
    <article class="right">右边区域<br /><br /></article>
    <article class="center">中间区域</article>
</section>
</body>
</html>

2.绝对定位

两边通过绝对定位定位到父盒子的左、右边框上，再根据实际的需要设置两边盒子的宽度，高度是根据内容自适应的，中间内容区通过定位属性左、右自适应宽度

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>02-绝对定位</title>

  <style type="text/css">
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    .container {
        position: relative;
    }
    .left {
        position: absolute;
        border: 1px solid black;
        width: 100px;
        left: 0;
    }
    .center {
        border: 1px solid black;
        position: absolute;
        left: 100px;
        right: 100px;
    }
    .right {
        border: 1px solid black;
        position: absolute;
        width: 100px;
        right: 0;
    }
</style>
</head>
<body>
<section class="container">
    <article class="left">左边区域<br /><br /></article>
    <article class="center">中间区域<br /><br /></article>
    <article class="right">右边区域<br /><br /></article>
</section>
</body>
</html>

3.flex布局

相比于浮动和定位，使用Flexbox布局实现三列布局要更好，因为弹性容器的高度会根据最高的弹性项进行修正，不会出现明显的台阶式效果。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>03-flex</title>

  <style type="text/css">
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    .container {
        display: flex;
    }
    .left {
        border: 1px solid black;
        width: 100px;
    }
    .center {
        border: 1px solid black;
        /* 使该盒子占据容器盒子的全部剩余空间 */
        flex: 1;  
    }
    .right {
        border: 1px solid black;
        width: 100px;
    }
</style>
</head>
<body>
<section class="container">
    <article class="left">左边区域<br /><br /></article>
    <article class="center">中间区域<br /><br /></article>
    <article class="right">右边区域<br /><br /></article>
</section>
</body>
</html>

4.grid布局

使用grid网格布局实现三列布局，和之前所讲的gird实现双列布局是同样的思想，只是把列数变为了3，高度依然不设置，通过容器项的内容高度自适应撑开整体高度

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>04-grid</title>

  <style type="text/css">
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    .container {
        display: grid;
        /* 设置为 3列 ，且中间宽度自适应*/
        grid-template-columns: 100px auto 100px;
    }
    .left {
        border: 1px solid black;
    }
    .center {
        border: 1px solid black;
    }
    .right {
        border: 1px solid black;
    }
</style>
</head>
<body>
<section class="container">
    <article class="left">左边区域<br /><br /></article>
    <article class="center">中间区域<br /><br /></article>
    <article class="right">右边区域<br /><br /></article>
</section>
</body>
</html>

5.圣杯布局

圣杯布局是通过浮动元素和外边距属性实现三列布局，但最重要的一点是，在文档中需要将优先渲染的内容写在最前方，但显示时看起来却好像是按照显示次序书写的一样

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>05-圣杯布局</title>

  <style type="text/css">
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    .container {
        border: 1px solid black;
        overflow: hidden;
        padding: 0 100px;
    }
    .left {
        /* 浮动，保证之后的"margin-left"属性可以将自身拉到上一行 */
        float: left; 
        width: 100px;
        /* 将元素向左移动属性值的单位，100%相对于父容器计算 */
        margin-left: -100%;
        /* 需要将自身再向左移动自身的宽度，进入容器的"padding-left"区域 */
        position: relative;
        /* 移动自身的宽度，刚好进入容器的"padding-left"区域 */
        left: -100px;
        background-color: greenyellow;
    }
    .center {
        float: left;
        width: 100%;
        background-color: darkorange;
    }
    .right {
        float: left;
        width: 100px;
        margin-left: -100px;
        position: relative;
        left: 100px;
        background-color: darkgreen;
    }
</style>
</head>
<body>
<section class="container">
    <article class="center">中间区域<br /><br /></article>
    <article class="left">左边区域<br /><br /></article>
    <article class="right">右边区域<br /><br /></article>
</section>
</body>
</html>

6.双飞翼布局

双飞翼布局是在圣杯布局上做了优化，解决了圣杯布局中布局发生错乱的问题。核心思路是在圣杯布局的基础上，再在内容区添加一层新的盒子，该盒子通过外边距将内容与两边的浮动元素分隔开，实际上中心盒子是没有"padding"属性的。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>06-双飞翼布局</title>

  <style type="text/css">
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    .container {
        border: 1px solid black;
        /* 解决子浮动元素高度塌陷的问题 */
        overflow: hidden;
    }
    .left {
        /* 浮动，保证之后的"margin-left"属性可以将自身拉到上一行 */
        float: left; 
        width: 100px;
        /* 将元素向左移动属性值的单位，100%相对于父容器计算 */
        margin-left: -100%;
        background-color: greenyellow;
    }
    .center {
        float: left;
        width: 100%;
        background-color: darkorange;
    }
    .right {
        float: left;
        width: 100px;
        margin-left: -100px;
        background-color: darkgreen;
    }
    .main {
      margin: 0 100px;
    }
</style>
</head>
<body>
<section class="container">
    <article class="center"><div class="main">中间区域<br /><br /></div></article>
    <article class="left">左边区域<br /><br /></article>
    <article class="right">右边区域<br /><br /></article>
</section>
</body>
</html>