一次搞定面试常问的三栏布局--六种实现

最新推荐文章于 2024-01-21 13:37:53 发布

杨九日

最新推荐文章于 2024-01-21 13:37:53 发布

阅读量237

点赞数

分类专栏： css 文章标签： css 定位 css3

本文链接：https://blog.csdn.net/qq_42835377/article/details/106690245

版权

css 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

文章目录

实现左栏宽100px，右栏200px，中间自适应，高度100%

利用浮动+margin

左边左浮动，右边有浮动，中间设置高度宽度100%，然后，设置margin空出左右位置。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>利用浮动</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        html,body{
            width: 100%;
            height: 100%;
        }
        #container{
            height: 100%;
            width: 100%;
           
        }
        .left{
            float: left;
            width: 100px;
            height: 100%;
            background-color: chocolate;
        }
        .right{
            float: right;
            width: 200px;
            height: 100%;
            background-color: cornflowerblue;
        }
        .center{
            height: 100%;
            width: 100%;
            margin: 0 200px 0 100px;
            background-color: chartreuse;
        }
    </style>
</head>
<body>
    <div id="container">
        <div class="left">left</div>
        <div class="right">right</div>
        <div class="center">center</div>
    </div>
</body>
</html>

利用绝对定位+margin

左右设置绝对定位，并设置宽度和距离左右边距；最后还是利用margin给左右空出位置。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>面试题练习</title>
    <style>
        body{
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }
        #container{
            width: 100%;
            height: 100%;
            position: absolute;
            /* position: relative; */
        }
        .left{
            width: 100px;
            height: 100%;
            position: absolute;
            left: 0;
            background-color: aquamarine;
        }
        .right{
            width: 200px;
            height: 100%;
            position: absolute;
            right: 0;
            top: 0;
            background-color: cadetblue;
            margin-left: -200px;
        }
        .center{
            margin: 0 200px 0 100px;
            width: 100%;
            height: 100%;
            /* box-sizing: margin-box; */
            background-color: chocolate;
        }
    </style>
</head>
<body>
    <div id="container">
        <div class="left"></div>
        <div class="center">111111</div>
        <div class="right"></div>
    </div>
</body>
</html>

利用flex实现

在父容器上设置display:flex;这样可以在子元素上设置flex属性，左右设置flex：0 0 100px/200px，中间设置auto。
flex介绍：
CSS属性 flex 规定了弹性元素如何伸长或缩短以适应flex容器中的可用空间。这是一个简写属性，用来设置 flex-grow, flex-shrink 与 flex-basis。

flex-grow：一个数字，规定项目将相对于其他灵活的项目进行扩展的量。
flex-shrink：一个数字，规定项目将相对于其他灵活的项目进行收缩的量。
flex-basis：项目的长度。合法值：“auto”、“inherit” 或一个后跟 “%”、“px”、“em” 或任何其他长度单位的数字。
如果根据flex设置固定长度，必须把扩展占比和收缩占比设为0。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex实现三栏布局</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            width: 100%;
            height: 100%;
        }
        #container{
            display: flex;
            width: 100%;
            height: 100%;
            background-color: black;
        }
        .left{
            flex:0 0 100px;
            background-color: blueviolet;
        }
        .right{
            flex:0 0 200px;
            background-color: brown;
        }
        .center{
            flex: auto;
            background-color: chartreuse;
        }
    </style>
</head>
<body>
    <div id="container">
        <div class="left">left</div>
        <div class="center">center</div>
        <div class="right">right</div>
        
    </div>
</body>
</html>

圣杯布局

圣杯布局，也是利用浮动和负边距来实现。父级元素设置左右的 padding，三列均设置向左浮动，中间一列放在最前面，宽度设置为父级元素的宽度，因此后面两列都被挤到了下一行，通过设置 margin 负值将其移动到上一行，再利用相对定位，定位到两边。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>圣杯布局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            height: 100%;
            width: 100%;
        }

        #container {
            padding-left: 100px;
            padding-right: 200px;
            height: 100%;

        }

        .left {
            /* position: absolute;
            float: left;
            width: 100px;
            height: 100%;
            background-color: cornflowerblue;
            left: -100px; */
            position: relative;
            left: -100px;

            float: left;
            margin-left: -100%;

            width: 100px;
            height: 100%;
            background: tomato;
        }

        .right {
            /* float: left;
            width: 200px;
            height: 100%;
            background-color: darkcyan;
            left: -200px;
            position: relative; */
            position: relative;
            left: 200px;

            float: left;
            margin-left: -200px;

            width: 200px;
            height: 100%;
            background: gold;
        }

        .center {
            /* float: left;
            width: 100%;
            height: 100%;
            padding-left: 100px;
            padding-right: 200px;
            /* margin: 0 200px 0 100px; */
            /* margin-left: 100px; */
            /*background-color: darkorange; */
            float: left;

            width: 100%;
            height: 100%;
            background: lightgreen;

        }
    </style>
</head>

<body>
    <div id="container">
        <div class="center">center</div>
        <div class="left">left</div>
        <div class="right">right</div>

    </div>
</body>

</html>

双飞翼布局

两种说法，都是利用margin；区别不大。

双飞翼布局，双飞翼布局相对于圣杯布局来说，左右位置的保留是通过中间列的 margin 值来实现的，而不是通过父元
素的 padding 来实现的。本质上来说，也是通过浮动和外边距负值来实现的。
双飞翼布局：多了个div。思想：让left以margin-left：100%，跑到上面最左覆盖middle；right的margin-left移动200px跑到最右边；双飞翼没有留空位，所以不需要再次反向移动left与right。但需要在middle中定义一个main的div通过设置margin：0，200px，0，150px，让middle的内容显示在中间，不会被left、right覆盖。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>圣杯布局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            height: 100%;
            width: 100%;
        }

        #container {
            padding-left: 100px;
            padding-right: 200px;
            height: 100%;

        }

        .left {
            /* position: absolute;
            float: left;
            width: 100px;
            height: 100%;
            background-color: cornflowerblue;
            left: -100px; */
            position: relative;
            left: -100px;

            float: left;
            margin-left: -100%;

            width: 100px;
            height: 100%;
            background: tomato;
        }

        .right {
            /* float: left;
            width: 200px;
            height: 100%;
            background-color: darkcyan;
            left: -200px;
            position: relative; */
            position: relative;
            left: 200px;

            float: left;
            margin-left: -200px;

            width: 200px;
            height: 100%;
            background: gold;
        }

        .center {
            /* float: left;
            width: 100%;
            height: 100%;
            padding-left: 100px;
            padding-right: 200px;
            /* margin: 0 200px 0 100px; */
            /* margin-left: 100px; */
            /*background-color: darkorange; */
            float: left;

            width: 100%;
            height: 100%;
            background: lightgreen;

        }
    </style>
</head>

<body>
    <div id="container">
        <div class="center">center</div>
        <div class="left">left</div>
        <div class="right">right</div>

    </div>
</body>

</html>

利用grid 网格布局

display:grid;网格布局中，和flex用法类似。其直系子元素将成为网格元素。
grid-template-columns 和 grid-template-rows 属性来定义网格中的行和列

grid-template-columns: 200px 200px 200px;是创建三列布局，将网格元素依次排列。
- 如图：
fr是单位，代表网格容器中可用空间的一等份。会随着空间大小而改变。
代码实现：

<!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;
        }
        #container{
            position: absolute;
            display: grid;
            grid-template-columns: 100px 1fr 200px;
            width: 100%;
            height: 100%;
            background-color: cornflowerblue;
        }
        .top{
            width: 100px;
            height: 100%;
            background-color: coral;
        }
        .middle{
            width: 100%;
            height: 100%;
            background-color: cornflowerblue;
        }
        .bottom{
            height: 200%;
            width: 200px;
            background-color: darkgreen;
        }
    </style>
</head>
<body>
    <div id="container">
        <div class="top">top</div>
        <div class="middle">middle</div>
        <div class="bottom">bottom</div>
        
    </div>
</body>
</html>

总结

核心：三栏布局的实现，既然要实现自适应；那么中间的宽度定是100%，接下来就靠利用脱离文档流，将左栏、右栏移动到相应位置，而不影响中间的自适应的能力。

最后给个效果吧：五种效果除了颜色不一样，其他都一样。
在这里插入图片描述

杨九日

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
一次搞定面试常问的三栏布局--六种实现

实现左栏宽100px，右栏200px，中间自适应，高度100%利用浮动+margin左边左浮动，右边有浮动，中间设置高度宽度100%，然后，设置margin空出左右位置。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&
复制链接

扫一扫