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

·  阅读 176

常见布局

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: 200pxmargin-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,且将原本.contentfloat: 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>
复制代码

结尾

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

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改