GET网页设计：全面解析五种实用的CSS三栏布局技巧

椰汁33
967 阅读6分钟

前言

写了这么久的文章，大家有没有注意掘金首页的三栏布局咋实现呢？接下来小编给大家分享五种方法来实现三栏布局。

image.png

正文

三栏布局实现主体内容优先加载,左右固定宽度，中间自适应。

圣杯布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .page{
            height: 200px;
            padding:0 200px;
        }
        .left,.right{
            height: 200px;
            width: 200px;
            background-color: #55ade4;
        } 
        .page div{
            float: left;
        }
        .content{
            width: 100%;
            height: 200px;
            background-color:pink;
        }
    </style>
</head>
<body>
    <div class="page">
        <div class="content">主体内容</div>
        <div class="left">广告位</div>
        <div class="right">广告位</div>
    </div>
</body>
</html>

image.png

  • 设置一个page容器，在该容器内设置三个div容器为content、left和right容器
  • 给left和right容器设置宽高200*200，content容器的宽度为100%
  • 给page容器设置一个padding上下为0，左右为200px，那么这个时候left和right容器就会被挤到下面

那么如何实现三栏布局的效果呢？

  • 先给left容器设置一个相对定位，让他相对自己的位置向左移动200px，效果为：

image.png

  • 再给left容器设置一个 left: -100%;向左移父容器的宽度，也就是content的宽度，因为content的宽度设置了100%，效果为：

image.png

  • left的位置实现了，现在我们实现right的效果，同样，也给right容器设置一个相对定位，让它相对自己的位置左移200px，效果为： image.png
  • 再给right容器设置right: -200px;，让该容器向右移动200px，就达到了想要的结果

代码：

 .left{
            margin-left: -200px;
            position: relative;
            left: -100%;
        }
        .right{
            margin-left: -200px;
            position: relative;
            right: -200px;
            /* left: 200px; */
        }

最终效果： image.png

双飞翼布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         *{
            margin: 0;
            padding: 0;
        }
        .page{
            height: 200px;
        }
        .left,.right{
            height: 200px;
            width: 200px;
            background-color: #55ade4;
        }
        .content{
            height: 200px;
            background-color: #a2ce72;
            width: 100%;
        }
        .inner{
            margin: 0 200px;
            height: 100%;
        }
    </style>
</head>
<body>
    <div class="page">
        <div class="content">
            <div class="inner">主体内容</div>
        </div>
        <div class="left">广告位</div>
        <div class="right">广告位</div>
    </div>
</body>
</html>

image.png

  • 设置了一个page容器，该容器里面放了content容器、left容器和right容器，content容器内又放了inner容器
  • 给left和right容器设置了200*200，content容器的宽为100%，高为200px，得到了上面的效果 那么如何实现三栏布局的效果呢？
  • 先给page里的div设置浮动，效果为： image.png

那么如何实现三栏布局的效果呢？

  • 给left容器设置 margin-left: -100%;，让left容器向左移父容器的宽度，也就是content的宽度，效果为：

image.png

  • 给right设置margin-left: -200px;，也就是让right容器左移200px，就得到了想要的结果

代码：

       .page>div{
            float: left;
        }
        .left{
            margin-left: -100%;
        }
        .right{
            margin-left: -200px;
        }

最终效果： image.png

flex：将主题内容放在前面加载，但是通过order属性将left位置移到最前方

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<style>
    *{
        padding: 0;
        margin: 0;
    }
   .page{
    height: 200px;
    display: flex;
    width: 100%;
   }
   .left,.right{
    width: 200px;
    background-color: #8c3282;
   }
   .content{
    background-color: #96dd57;
   }
</style>
</head>
<body>
    <div class="page">
        <div class="left">广告位</div>
        <div class="content">主体内容</div>
        <div class="right">广告位</div>
    </div>
</body>
</html>

image.png

  • 设置一个page容器，在该容器内设置三个div容器为content、left和right容器
  • page容器设置一个弹性布局，该容器内的子容器会全部去同一行

插播！！！

  • flex-shrink：其值是一个无单位的数字，默认值为1，意味着所有的flex项都具有相同的收缩能力。如果给定一个大于1的值，该flex项将比其他项目更快地缩小；如果值为0，则该项目将不允许收缩大小，即使容器变得太小。
  • flex-grow：同样是一个无单位的数字，默认值为0，意味着项目不会增长以填充额外的空间。如果设置为正数，项目将根据其 flex-grow 值相对于其他项目的比例分配剩余空间。
  • flex：flex 是 flex-grow, flex-shrink, 和 flex-basis 这三个属性的简写形式。默认值为 0 1 auto，分别对应于 flex-grow, flex-shrink, 和 flex-basis 的初始值。使用 flex 可以快速设置这三个属性，以控制元素在弹性容器中的大小调整行为(flex-basis: auto表示为其基础大小由内容决定)。
  • order：同样是一个无单位的数字，数字的大小决定了flex item的排列顺序。默认值为0。具有更小order值的项目会优先排列，值越大，排列越靠后。如果两个项目的order值相同，则按照它们在源代码中的顺序排列。注意该属性只在弹性容器内的直接子元素（flex items）上有效，负数也是有效的，可以使元素排在默认排序之前。

那么如何实现三栏布局的效果呢？

  • 给content容器添加一个flex：1，也就是flex-grow：1，即在父容器足够大的时候，允许扩张，再给content设置一个order:1;，right容器设置一个order:2;，实现先排列left容器，再排列content容器，最后排列right容器，就可以达到效果了

代码：

 .content{
    background-color: #96dd57;
    flex:1;
    order:1;
   }
   .right{
    order:2;
   }

最终效果： image.png

table布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
        padding: 0;
        margin: 0;
    }
   .page{
    width: 100vw;
    height: 200px;
   }
   .left,.right{
    width: 200px;
    height: 200px;
    background-color: #c9ba57;
   }
   .content{
    width: 100%;
    height: 200px;
    background-color: #d33e6b;
   }
    </style>
</head>
<body>
    <div class="page">
     <div class="left">广告位</div>
    <div class="content">主体内容</div>
    <div class="right">广告位</div>
    </div>
</body>
</html>

image.png

  • 设置一个page容器，在该容器内设置三个div容器为content、left和right容器
  • page容器设置屏幕的宽度和高200px，left和right容器设置200*200，content容器的宽度为100%，高为200px

那么怎么实现三栏布局的效果吧？

  • 给page设置display: table;，设置后该元素就会作为一个容器，就像 <table> 标签一样
  • 再给page设置 table-layout: fixed;，设置后列宽由表格的首个单元格决定
  • 给page下的所有div设置 display: table-cell;，设置后该元素的表现行为设置为类似表格单元格，所有的div容器变成单元格排成一行了，left和right宽度为200px，content为100%，就会占满剩下的宽度，就实现了想要的效果。

代码：

.page{
    width: 100vw;
    height: 200px;
    display: table;
    table-layout: fixed;
   }
   .page>div{
    display: table-cell;
   }

最终效果：

image.png

grid布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
        padding: 0;
        margin: 0;
    }
   .page{
    width: 100vw;
    height: 200px;
   }
   .left,.right{
    height: 200px;
    background-color: #c9ba57;
   }
   .content{
    height: 200px;
    background-color: #d33e6b;
   }
    </style>
</head>
<body>
    <div class="page">
     <div class="left">广告位</div>
    <div class="content">主体内容</div>
    <div class="right">广告位</div>
    </div>
</body>
</html>

image.png

  • 设置一个page容器，在该容器内设置三个div容器为content、left和right容器
  • page容器设置屏幕的宽度和高200px，left和right容器设置高为200px，content容器设置高为200px

那么怎么实现三栏布局呢？

  • 给page添加display: grid;，创建网格布局
  • 给page添加 grid-template-columns: 200px auto 200px;明确指定网格的列宽，第一列宽度固定为200px，第二列的宽度为 auto，第三列宽度固定为200px，就可以达到效果了。

代码：

.page{
    width: 100vw;
    height: 200px;
    display: grid;
    grid-template-columns: 200px auto 200px;
   }

最终效果：

image.png

结语

大家快选一种方法去做一个三栏布局吧~期待你的分享

image.png

avatar
文章
阅读
粉丝