圣杯布局与双飞翼布局

最新推荐文章于 2021-12-28 20:30:44 发布

xian-嘚嘚儿

最新推荐文章于 2021-12-28 20:30:44 发布

阅读量109

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/weixin_46414444/article/details/114284778

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

实现功能
1、三栏，左右两边固定宽度，中间宽度自适应
2、优先渲染中间部分
如图效果：
在这里插入图片描述

圣杯布局

利用浮动与相对定位

<body>
<div id="header">header</div>
<div id="container">
    <div id="center" class="column">center</div>
    <div id="left" class="column">left dsgd rdshgfdh dfhshf sgrdhgf esrhrdhd ersr yesr yeray eryertaer ear year erya </div>
    <div id="right" class="column">right</div>
</div>
<div id="footer">footer</div>

<style>
    body {
        margin: 0;
        min-width: 600px;   /*  设置最小宽度，防止中间部分被遮挡  */
    }

    #container {
        padding-left: 200px;
        padding-right: 150px;
    }
    #container .column {
        float: left;
    }

    #center {
        width: 100%;
        background: brown;
    }

    #left {
        width: 200px;
        background: aqua;
        margin-left: -100%;
        position: relative;
        right: 200px;
    }

    #right {
        width: 150px;
        background: blue;
        margin-left: -150px;
        position: relative;
        left: 150px;
        /*margin-right: -150px;  !* 虽然没搞懂，但这句话与上面的三句话效果是一样的, *!*/
    }

    #footer,#header {
        clear: both;
        background: burlywood;
    }
</style>
</body>

双飞翼布局

利用浮动与负边距

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

<style>
    body {
        margin: 0;
        min-width: 600px;   /*  设置最小宽度，防止中间部分被遮挡  */
    }

    #container {
        width: 100%;/*  float之后需要设置宽度，否则宽度只为包裹宽度  */
        background: black;

    }

    .column {
        float: left;
    }

    #center {
        /*padding-left: 200px; */
        /*padding-right: 150px;*/
        margin-left: 200px; /*  这里测试了设置内边距和外边距，效果一样  */
        margin-right: 150px;/*  这里测试了设置内边距和外边距，效果一样  */
        background: brown;
    }
    #left {
        width: 200px;
        margin-left: -100%;/*  左右负边距在元素有高度时，则向该方向移动相应宽度，再加上该元素浮动属性,就跑到center左边了 */
        background: aqua;
    }

    #right {
        width: 150px;
        margin-left: -150px;/* 理同left */
        background: blue;
    }

    #footer, #header {
        clear: both;
        background: burlywood;
    }

</style>
</body>