CSS3高阶用法(三)之双飞翼、圣杯模型

image.png

三栏布局

image.png

左宽度300px，右宽度300px，中间模块铺满剩余空间，有什么具体实现方案？

圣杯模型

<div class="container">
    <div class="middle">
        中
    </div>
    <div class="left">左</div>
    <div class="right">右</div>
</div>

    <style>
    * {
            margin: 0;
            padding: 0;
        }

        div {
            height: 150px; /*第一步，三列等高情况*/
        }

        .left {
            width: 300px;
            background: orange;
/*使用float，但是float不会直接在middle上，需要结合margin-left: -100% 才能上去*/
            float: left; 
            margin-left: -100%;
/*填充container的pading-left 300px;*/
            position: relative;
            left: -300px; 
        }

        .right {
            width: 300px;
            float: left;
            margin-left: -300px;
            background: blue;
            position: relative;/*相对于自己*/
            right: -300px;
        }

        .middle {
            background: yellow;
            float: left;
            width: 100%;
        }

        .container{
        /*给左右容器预留300px位置*/
            padding-left: 300px;
            padding-right: 300px;
        }
    </style>
    

middle内容比较重要，需优先加载，文档流从上到下加载，放在第一个优先展示

image.png

双飞翼模型

主要原理

• margin不占据盒子模型
• padding占据盒子模型的距离

<div class="middle">
    <div class="inner">
        中
    </div>
</div>
<div class="left">左</div>
<div class="right">右</div>

<style>
        * {
            margin: 0;
            padding: 0;
        }
        div {
            height: 150px;
        }
        .left {
            width: 300px;
            background: orange;
            float: left;
            margin-left: -100%;
        }
        .right {
            width: 300px;
            float: left;
            margin-left: -300px;
            background: blue;
        }

        .middle {
            background: yellow;
            float: left;
            width: 100%;
        }
        .middle .inner {
            margin-left: 300px;
        }
    </style>

对高度的优化

• 如果三列内容高度不一致

<div class="container">
    <div class="middle">
        <div class="inner">
            中
        </div>
    </div>
    <div class="left">左 <p>第二行</p></div>
    <div class="right">右</div>
</div>

<style>
        * {
            margin: 0;
            padding: 0;
        }

        .left {
            width: 300px;
            background: orange;
            float: left;
            margin-left: -100%;
        }

        .right {
            width: 300px;
            float: left;
            margin-left: -300px;
            background: blue;
        }

        .middle {
            background: yellow;
            float: left;
            width: 100%;
        }

        .middle .inner {
            margin-left: 300px;
        }

        /*三列和最高的列 等高*/
        .left, .middle, .right {
            padding-bottom: 9999px;
            margin-bottom: -9999px;
        }

        /*将溢出的隐藏，这样三列等高*/
        .container{
            overflow: hidden;
        }
    </style>

• 相关书籍：《css那些事》