CSS常见的7种三列布局总结

九牛一毛
162 阅读5分钟

CSS常见的7种三列布局

最近在恶补一下前端知识，先从CSS网页布局学起来吧，主要是要熟练使用margin和float属性,话不多说，看码！

实现网页左右两列固定宽度、中间部分自适应的三列布局

页面html布局如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS常见的6种三列布局总结</title>
    <style>
       
    </style>
</head>
<body>
<div class="container">
    <div class="left"></div>
    <div class="right"></div>
    <div class="main"></div>
</div>
</body>
</html>

margin-left 和margin-right的不常见用法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>margin用法</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            text-decoration: none;
            list-style: none;
        }

        .main {
            float: left;
            background-color: red;
            width: 100%;
            height: 300px;
        }

        .left {
            float: left;
            background-color: green;
            width: 200px;
            height: 200px;
        }

        .right {
            float: left;
            background-color: blue;
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>

<div class="container">
    <div class="main">主内容</div>
    <div class="left">左边栏</div>
    <div class="right">右边栏</div>
</div>
</body>
</html>

效果图

image.png

中间栏的 width:100%时会占据整行，把左边栏和右边栏都挤到下一行

margin-left：-100% 会使元素向左移动一个父级的宽度（100% 是父级的宽度 就会向左移动），使所制定元素的左边紧挨着父盒子的最左边

.left {
    float: left;
    background-color: green;
    width: 200px;
    height: 200px;
    margin-left: -100%;
}

效果图如下：

image.png

接下来请看几种正式的布局方式吧！

1. 浮动+margin方式布局

<style>
    /** 清楚浏览器默认样式**/
    * {
        margin: 0;
        padding: 0;
        text-decoration: none;
        list-style: none;
    }

    .left {
        float: left;
        width: 200px;
        background-color: red;
        /** 添加默认高度方便测试 **/
        height: 200px;
    }
    .right {
        float: right;
        width: 200px;
        background-color: blue;
        /** 添加默认高度方便测试 **/
        height: 200px;
    }
    .main {
        background-color: green;
        /** 上下边距为0 左右边距为200px **/
        margin: 0 200px;
        /** 添加默认高度方便测试 **/
        height: 300px;
    }
</style>

运行效果如图

image.png

2. 浮动+BFC方式布局

通过触发main的BFC环绕浮动的元素，达到三栏的效果

<style>
    /** 清楚浏览器默认样式**/
    * {
        margin: 0;
        padding: 0;
        text-decoration: none;
        list-style: none;
    }

    .left {
        float: left;
        width: 200px;
        background-color: red;
        /** 添加默认高度方便测试 **/
        height: 200px;
    }
    .right {
        float: right;
        width: 200px;
        background-color: blue;
        /** 添加默认高度方便测试 **/
        height: 200px;
    }
    .main {
        background-color: green;
        /** 触发BFC **/
        display: flow-root;
        /** 添加默认高度方便测试 **/
        height: 300px;
    }
</style>

3. flex方式布局

<style>
    /** 清楚浏览器默认样式**/
    * {
        margin: 0;
        padding: 0;
        text-decoration: none;
        list-style: none;
    }

    .container {
        display: flex;
    }
    .left {
        width: 200px;
        background-color: red;
        /** 添加默认高度方便测试 **/
        height: 200px;
    }
    .right {
        width: 200px;
        background-color: blue;
        /** 添加默认高度方便测试 **/
        height: 200px;
    }
    .main {
        /** 撑开剩下的宽度 **/
        flex: 1;
        background-color: green;
        /** 添加默认高度方便测试 **/
        height: 300px;
    }
</style>

html标签做如下调整

<div class="container">
    <div class="left"></div>
    <div class="main"></div>
    <div class="right"></div>
</div>

左右两边定宽，然后给main一个flex：1,这里左右两边的宽度也可以用flex-basis表示,这里需要理解的点上flex:1这个地方，flex：number （代表着这个元素可以如何分配剩下的空间，因为左右默认值为0,单独给main设置了1，那么代表着main将独自享有剩下的所有空间，那么就实现了我们想要的效果。）要注意的是flex：1是flex的简写模式。

4. table方式布局

<style>
    /** 清楚浏览器默认样式**/
    * {
        margin: 0;
        padding: 0;
        text-decoration: none;
        list-style: none;
    }

    .container {
        display: table;
        width: 100%;
    }
    .left {
        display: table-cell;
        width: 200px;
        background-color: red;
        /** 添加默认高度方便测试 **/
        height: 200px;
    }
    .right {
        display: table-cell;
        width: 200px;
        background-color: blue;
        /** 添加默认高度方便测试 **/
        height: 200px;
    }
    .main {
        display: table-cell;
        background-color: green;
        /** 添加默认高度方便测试 **/
        height: 300px;
    }
</style>

html标签做如下调整

<div class="container">
    <div class="left"></div>
    <div class="main"></div>
    <div class="right"></div>
</div>

5. 定位方式布局

<style>
    /** 清楚浏览器默认样式**/
    * {
        margin: 0;
        padding: 0;
        text-decoration: none;
        list-style: none;
    }

    .container {
        position: relative;
    }
    .left {
        position: absolute;
        width: 200px;
        background-color: red;
        /** 添加默认高度方便测试 **/
        height: 200px;
        left: 0;
    }
    .right {
        position: absolute;
        width: 200px;
        background-color: blue;
        /** 添加默认高度方便测试 **/
        height: 200px;
        right: 0;
    }
    .main {
        margin: 0 200px;
        background-color: green;
        /** 添加默认高度方便测试 **/
        height: 300px;
    }
</style>

6. 圣杯方式布局

浮动结合相对定位方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圣杯布局</title>
    <style>
        /** 清楚浏览器默认样式**/
        * {
            margin: 0;
            padding: 0;
            text-decoration: none;
            list-style: none;
            box-sizing: border-box;
        }

        .container {
            margin-left: 200px;
            margin-right: 200px;
        }
        .left {
            float: left;
            width: 200px;
            background-color: red;
            /** 添加默认高度方便测试 **/
            height: 200px;
            margin-left: -100%;
            position: relative;
            left: -200px;
        }
        .right {
            float: left;
            width: 200px;
            background-color: blue;
            /** 添加默认高度方便测试 **/
            height: 200px;
            margin-left: -200px;
            position: relative;
            right: -200px;
        }
        .main {
            float: left;
            background-color: green;
            /** 添加默认高度方便测试 **/
            height: 300px;
            /** 会填充整行空间 */
            width: 100%;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="main"></div>
    <div class="left"></div>
    <div class="right"></div>
</div>
</body>
</html>

7. 双飞翼方式布局

不同点是，main内容用单独的div包裹，让外层div担任浮动角色，内部main设置margin-left和margin-right即可

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>双飞翼布局</title>
  <style>
    /** 清楚浏览器默认样式**/
    * {
      margin: 0;
      padding: 0;
      text-decoration: none;
      list-style: none;
      box-sizing: border-box;
    }

    .left {
      float: left;
      width: 200px;
      background-color: red;
      /** 添加默认高度方便测试 **/
      height: 200px;
      margin-left: -100%;
    }
    .right {
      float: left;
      width: 200px;
      background-color: blue;
      /** 添加默认高度方便测试 **/
      height: 200px;
      margin-left: -200px;
    }
    .main {
      background-color: green;
      /** 添加默认高度方便测试 **/
      height: 300px;
      margin-left: 200px;
      margin-right: 200px;
    }
    .content {
      float: left;
      width: 100%;
    }
  </style>
</head>
<body>
<div class="container">
  <div class="content">
    <div class="main"></div>
  </div>
  <div class="left"></div>
  <div class="right"></div>
</div>
</body>
</html>
avatar
文章
阅读
粉丝