美文网首页
圣杯布局和双飞翼布局

圣杯布局和双飞翼布局

作者: 不想写代码的程序媛 | 来源:发表于2019-08-10 16:46 被阅读0次

相同点:都是固-弹性-固的布局方式;中间弹性布局的内容优先加载。

圣杯布局通过外层容器的padding以及内层左右子元素的margin值和相对定位,使左右元素分布在中间元素的两边。
html结构:

<div class="container">
     <div class="main"></div>
     <div class="left"></div>
     <div class="right"></div>
</div>

css样式:

<style>
        .main {
            float: left;
            width: 100%;
            height: 200px;
            background: #f0e
        }
        .left {
            position: relative;
            float: left;
            margin-left: -100%;
            /* 向左偏移180px */
            left: -180px;
            /* right: 180px; */
            width: 180px;
            height: 200px;
            background: #345;
        }
        .right {
            position: relative;
            float: left;
            margin-left: -200px;
            left: 200px;
            width: 200px;
            height: 200px;
            background: #fcc
        }
        .container::after {
            content: '';
            clear: both;
        }
        .container {
            padding: 0 200px 0 180px;
            /* width为100%的属性不能加,会使宽度撑宽,导致出现横向滚动条 */
            /* width: 100%; */
            height: 200px;
        }
</style>

当left元素其left偏移量缺失时,即如下所示:

position: relative;
float: left;
margin-left: -100%;
width: 180px;
height: 200px;
background: #345;

页面的布局结构为:


image.png

此时margin-left:-100%所取的具体值为class为main的元素宽度,left与main元素左重叠,如果希望left元素右边与main元素左边对齐,则需将left元素相对于自身向左偏移它本身的宽度。

双飞翼布局:
双飞翼布局的DOM结构,main元素会比圣杯布局的多一层。main元素通过margin将左右留白,然后左右元素通过margin-left和浮动飘到main元素左右两边。
DOM结构:

<div id="app">
        <div class='outer'>
            <div class="main">main</div>
        </div>

        <div class="left">left</div>
        <div class="right">right</div>
</div>

CSS样式:

<style>
        #app::after {
            content: '';
            clear: both;
        }
        .outer {
            float: left;
            width: 100%;
            height: 200px;
        }
        .main {
            margin-left: 200px;
            margin-right: 180px;
            height: 100%;
            background: #dfcd;
        }
        .left {
            float: left;
            margin-left: -100%;
            width: 200px;
            height: 200px;
            background: #ff6;
        }
        .right {
            float: left;
            margin-left: -180px;
            width: 180px;
            height: 200px;
            background: #9c0;
        }
</style>

最后的效果图:


image.png

如果不设置left元素和right元素的margin-left值,其样式为:


image.png

相关文章

网友评论

      本文标题:圣杯布局和双飞翼布局

      本文链接:https://www.haomeiwen.com/subject/iqhcjctx.html