实现三栏布局

时间 2021-02-01

标签 css html git github 浏览器布局 post flex code orm 栏目 CSS 繁體版

原文原文链接

实现三栏布局

三栏布局在开发十分常见，即两边固定宽度，中间自适应宽度的布局。css

Flex

使用CSS3的flex布局实现三栏布局，Flex布局也称弹性布局，能够为盒状模型提供最大的灵活性，是布局的首选方案，现已获得全部现代浏览器的支持，此处主要是利用flex容器成员默认按照主轴排列，以及利用flex属性即flex-grow，flex-shrink和flex-basis的简写形式将间的块自适应撑起。html

<!DOCTYPE html>
<html>
<head>
    <title>FLEX</title>
    <style type="text/css">
        .container{
            display: flex;
            height: 200px;
            border: 1px solid #eee;
        }
        .container > div{
            color: #fff;
        }
        .container > .left{
            width: 200px;
            background-color: #19be6b;
        }
        .container > .main{
            flex: 1;
            background-color: #2979ff;
        }
        .container > .right{
            width: 200px;
            background-color: #fa3534;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left">left</div>
        <div class="main">main</div>
        <div class="right">right</div>
    </div>
</body>
</html>

Calc

经过CSS的calc能够动态计算中间部分的长度从而作到自适应，calc能够配合inline-block行内块级元素实现三栏布局，注意使用行内块级元素的时候若是编写HTML时换行，这个空白的换行也会做为元素解析从而会产生空白间隙，因此在编写时此处不要换行，此外calc经过与float配合实现也是可行的。git

<!DOCTYPE html>
<html>
<head>
    <title>Calc</title>
    <style type="text/css">
        .container{
            height: 200px;
            border: 1px solid #eee;
        }
        .container > div{
            display: inline-block;
            height: 100%;
            color: #fff;
        }
        .container > .left{
            width: 200px;
            background-color: #19be6b;
        }
        .container > .main{
            width: calc(100% - 400px);
            background-color: #2979ff;
        }
        .container > .right{
            width: 200px;
            background-color: #fa3534;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left">left</div><div class="main">main</div><div class="right">right</div>
    </div>
</body>
</html>

BFC

BFC块级格式化上下文Block Formatting Context，是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其余元素交互的区域，是用于布局块级盒子的一块渲染区域，而且与这个区域的外部毫无关系，是一个独立的区域，是一个环境，在这里利用BFC区域不会与浮动元素重叠的特性实现三栏布局。github

<!DOCTYPE html>
<html>
<head>
    <title>BFC</title>
    <style type="text/css">
        .container{
            height: 200px;
            border: 1px solid #eee;
        }
        .container div{
            color: #fff;
            height: 100%;
        }
        .container > .left{
            float: left;
            width: 200px;
            background-color: #19be6b;
        }
        .container > .main{
            display: flex; /* BFC可触发条件之一：弹性元素，display为flex或inline-flex元素的直接子元素。 */
            background-color: #2979ff;
        }
        .container > .right{
            float: right;
            width: 200px;
            background-color: #fa3534;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left">left</div>
        <div class="right">right</div>
        <div class="main">main</div>
        
    </div>
</body>
</html>

Margin

这个方法是使使左右模块各自向左右浮动，并设置中间模块的margin值使中间模块宽度自适应。浏览器

<!DOCTYPE html>
<html>
<head>
    <title>Margin</title>
    <style type="text/css">
        .container{
            height: 200px;
            border: 1px solid #eee;
        }
        .container div{
            color: #fff;
            height: 100%;
        }
        .container > .left{
            float: left;
            width: 200px;
            background-color: #19be6b;
        }
        .container > .main{
            margin-left: 200px;
            margin-right: 200px;
            background-color: #2979ff;
        }
        .container > .right{
            float: right;
            width: 200px;
            background-color: #fa3534;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left">left</div>
        <div class="right">right</div>
        <div class="main">main</div>
        
    </div>
</body>
</html>

Float

使用Float配合margin实现三栏布局，主要是margin的负值的应用。布局

<!DOCTYPE html>
<html>
<head>
    <title>Float</title>
    <style type="text/css">
        .container{
            height: 200px;
            border: 1px solid #eee;
        }
        .container div{
            color: #fff;
            height: 100%;
        }
        .container > .left{
            float: left;
            width: 200px;
            margin-left: -100%;
            background-color: #19be6b;
        }
        .container > .main-container{
            float: left;
            width: 100%;
        }
        .container > .main-container > .main{
            margin-left: 200px;
            margin-right: 200px;
            background-color: #2979ff;
        }
        .container > .right{
            float: right;
            width: 200px;
            margin-left: -200px;
            background-color: #fa3534;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="main-container">
            <div class="main">main</div>
        </div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
</body>
</html>

Table

利用table布局即表格的样式，实现三栏布局。post

<!DOCTYPE html>
<html>
<head>
    <title>Table</title>
    <style type="text/css">
        .container{
            display: table;
            height: 200px;
            width: 100%;
            border: 1px solid #eee;
        }
        .container > div{
            display: table-cell;
            color: #fff;
        }
        .container > .left{
            width: 200px;
            background-color: #19be6b;
        }
        .container > .main{
            background-color: #2979ff;
        }
        .container > .right{
            width: 200px;
            background-color: #fa3534;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left">left</div>
        <div class="main">main</div>
        <div class="right">right</div>
    </div>
</body>
</html>

Grid

目前CSS布局方案中,网格布局能够算得上是最强大的布局方案了。它能够将网页分为一个个网格，而后利用这些网格组合作出各类各样的布局。Grid布局与Flex布局有必定的类似性，均可以指定容器内部多个成员的位置。不一样之处在于，Flex布局是轴线布局，只能指定成员针对轴线的位置，能够看做是一维布局。Grid布局则是将容器划分红行和列，产生单元格，而后指定成员所在的单元格，能够看做是二维布局。flex

<!DOCTYPE html>
<html>
<head>
    <title>Grid</title>
    <style type="text/css">
        .container{
            height: 200px;
            display: grid;
            grid-template-columns: 200px auto 200px;
            border: 1px solid #eee;
        }
        .container > div{
            color: #fff;
        }
        .container > .left{
            background-color: #19be6b;
        }
        .container > .main{
            background-color: #2979ff;
        }
        .container > .right{
            background-color: #fa3534;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left">left</div>
        <div class="main">main</div>
        <div class="right">right</div>
    </div>
</body>
</html>

每日一题

https://github.com/WindrunnerMax/EveryDay

参考

https://zhuanlan.zhihu.com/p/25070186
https://juejin.cn/post/6844903686758465550
https://juejin.cn/post/6844904062224171021