CSS-三栏布局的几种实现方式

CSS/ 面试 CSS-面试 CSS

创建时间:2019-01-24 17:41

阅读:

常见布局
三栏布局

常见布局

float布局、Position定位、table布局、弹性(flex)布局、网格(grid)布局、（圣杯布局、双飞翼布局、calc()函数）

三栏布局

左右定宽（200px），中间自适应

大概就是这样的：

如果中间部分height比较大，那效果是这样:

1.float布局

模板部分：

<body>
    <div class='wrap'>
        <div class='left'>左边元素定宽</div>
        <div class='right'>右边元素定宽</div>
        <div class='content'>中间元素自适应</div>  // 注意这里！
    </div>
</body>

css部分：

<style>
    /*清除浏览器默认边距*/
    * {
        padding: 0;
        margin: 0;
    }
    .wrap {
        border: 1px solid red;
        overflow: hidden;    // 清除浮动，不然可能会影响其他元素的显示
    }
    .left {
        float: left;
        width: 200px;       
        height: 200px;
        background: palevioletred;
    }
    .content {
        height: 200px;
        background: plum;
        margin-left: 200px;    // 这个非常有必要！
        margin-right: 200px;   // 这个非常有必要！
    }
    .right {
        float: right;
        width: 200px;
        height: 200px;
        background: powderblue; 
    }
</style>

注意：

DOM上左右元素要先加上，将中间元素放最后！不然就会变成下面这个样子：
margin-left: 200px和margin-right: 200px非常有必要！因为如果一旦中间元素的高度大于两边时，就是这个样子了：
因为float浮动，元素脱离了文档流，怕会影响其他元素显示，所以一定要记得清除浮动，这里是用BFC清除浮动，也有其他清除浮动的方法，可以自行了解一下，毕竟面试还是经常问到的

2.Position定位

模板部分：

<body>
    <div class='wrap'>
        <div class='left'>左边元素定宽</div>
        <div class='right'>右边元素定宽</div>
        <div class='content'>中间元素自适应</div>  // 和float布局一样！
    </div>
</body>

css部分：

<style>
    /*清除浏览器默认边距*/
    * {
        padding: 0;
        margin: 0;
    }
    .wrap {
        border: 1px solid red;
        overflow: hidden; 
        position: relative;   // Position定位
    }
    .left {
        position: absolute;   // 绝对定位
        left: 0;              // 靠左靠左
        width: 200px;       
        height: 200px;
        background: palevioletred;
    }
    .content {
        height: 300px;
        background: plum;
        margin-left: 200px;    // 这个和float布局注意里说的一样！
        margin-right: 200px;   // 这个就不必多说了吧！
    }
    .right {
        position: absolute;  // 绝对定位
        right: 0;            // 靠右靠右
        width: 200px;
        height: 200px;
        background: powderblue; 
    }
</style>

注意：

和float布局注意点一样啦！

3.table布局

模板部分：

<body>
    <div class='wrap'>
        <div class='left'>左边元素定宽</div>
        <div class='content'>中间元素自适应</div>  //中间元素这次不是放最后了
        <div class='right'>右边元素定宽</div>
    </div>
</body>

css部分：

/*清除浏览器默认边距*/
* {
    padding: 0;
    margin: 0;
}
.wrap {
    border: 1px solid red;
    overflow: hidden;
    display: table;         // 表格布局
    width: 100%;            // 这个也是一个小细节
}
.left {
    display: table-cell;     // 单元格
    width: 200px;
    height: 200px;
    background: palevioletred;
}
.content {
    display: table-cell;   // 单元格
    height: 300px;         // 这里中间元素比两边长
    background: plum;
}
.right {
    display: table-cell;   // 单元格
    width: 200px;
    height: 200px;
    background: powderblue; 
}
</style>

注意：

DOM上得按照左中右放置了，不然就会出现左右元素先出现的情况了
虽然我们给中间元素设置的height大于左右元素，但在显示的时候，三个元素是等高的（参照上面的图），而且高度是由三个元素中最大高度来决定
width: 100%也是一个该注意的小细节，因为如果我们没有给父元素设置宽度，就会变成酱紫，后面空出来了：

4.弹性（flex）布局

模板部分：

<body>
    <div class='wrap'>
        <div class='left'>左边元素定宽</div>
        <div class='content'>中间元素自适应</div>  //中间元素这次不是放最后了
        <div class='right'>右边元素定宽</div>
    </div>
</body>

css部分：

<style>
    /*清除浏览器默认边距*/
    * {
        padding: 0;
        margin: 0;
    }
    .wrap {
        border: 1px solid red;
        overflow: hidden;
        display: flex;     // 弹性布局
    }
    .left {
        width: 200px;
        height: 200px;
        background: palevioletred;
    }
    .content {
        flex: 1;        // 扩大比例为1，自动填满多余空间
        height: 300px;
        background: plum;
    }
    .right {
        width: 200px;
        height: 200px;
        background: powderblue; 
    }
</style>

注意:

这里唯一要知道的就是flex了，是flex-grow（增长比例）和flex-shrink（缩小比例）和flex-basis（默认大小）的缩写。

5.网格布局

模板部分：

<body>
    <div class='wrap'>
        <div class='left'>左边元素定宽</div>
        <div class='content'>中间元素自适应</div>  //中间元素这次不是放最后了
        <div class='right'>右边元素定宽</div>
    </div>
</body>

css部分：

<style>
    /*清除浏览器默认边距*/
    * {
        padding: 0;
        margin: 0;
    }
    .wrap {
        border: 1px solid red;
        overflow: hidden;
        display: grid;  // 网格布局
        grid-template-columns: 200px auto 200px;  // 左边宽度200px,中间自适应，右边宽度200px
    }
    .left {
        height: 200px;
        background: palevioletred;
    }
    .content {
        height: 300px;
        background: plum;
    }
    .right {
        height: 200px;
        background: powderblue; 
    }
</style>

注意：

如果想让三个元素等高，可以直接设置grid-template-rows: 200px

6.圣杯布局

模板部分：

<div class='wrap'>
    <div class='content'>中间元素自适应</div>   // 中间元素先渲染
    <div class='left'>左边元素定宽</div> 
    <div class='right'>右边元素定宽</div>                     
</div>

css部分：

<style>
    /*清除浏览器默认边距*/
    * {
        padding: 0;
        margin: 0;
    }
    .wrap {
        border: 1px solid red;
        overflow: hidden;
        padding-left: 200px;     
        padding-right: 200px;
    }
    .left {
        position: relative;
        left: -200px;
        float: left;
        margin-left: -100%;
        width: 200px;
        height: 200px;
        background: palevioletred;
    }
    .content {
        float: left;
        width: 100%;
        height: 300px;
        background: plum;
    }
    .right {
        float: left;
        margin-right: -200px;
        width: 200px;
        height: 200px;
        background: powderblue; 
    }
</style>

注意：

中间元素在DOM结构上优先，先行渲染
圣杯布局详细实现过程移步这里

7. 双飞翼布局

模板部分：

<div class='wrap'>
    <div class='wrap-content'>
        <div class='content'>中间元素自适应</div> 
    </div>
    <div class='left'>左边元素定宽</div> 
    <div class='right'>右边元素定宽</div>                   
</div>

css部分：

<style>
    /*清除浏览器默认边距*/
    * {
        padding: 0;
        margin: 0;
    }
    .wrap {
        border: 1px solid red;
        overflow: hidden;
        width: 100%;
    }
    .left {
        float: left;
        width: 200px;
        margin-left: -100%;
        height: 200px;
        background: palevioletred;
    }
    .wrap-content{
        float: left;
        width: 100%;
    }
    .content {
        margin-left: 200px;
        margin-right: 200px;
        height: 300px;
        background: plum;
    }
    .right {
        float: left;
        width: 200px;
        margin-left: -200px;
        height: 200px;
        background: powderblue; 
    }
</style>

注意：

中间元素在DOM结构上优先，先行渲染
双飞翼布局与圣杯布局不同的是，中间的div包裹了一个div，且将原本.content的float: left;``width: 100%;移到包裹div上
双飞翼布局详细实现过程移步这里

8.calc()函数

模板部分：

左边元素定宽

中间元素自适应

右边元素定宽

css部分：

<style>
    /*清除浏览器默认边距*/
    * {
        padding: 0;
        margin: 0;
    }
    .wrap {
        border: 1px solid red;
        overflow: hidden;
    }
    .left {
        float: left;
        width: 200px;
        height: 200px;
        background: palevioletred;
    }
    .content {
        float: left;
        width: calc(100% - 400px);   // 动态计算
        height: 300px;
        background: plum;
    }
    .right {
        float: left;
        width: 200px;
        height: 200px;
        background: powderblue; 
    }
</style>

结尾

以上就是作为前端菜鸡的我的一点点总结啦，有错误一定要告诉我！！请务必救救孩子吧！

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达，可以邮件至 610193653@qq.com，谢谢啦！