双飞翼布局与圣杯布局

最新推荐文章于 2025-03-24 10:35:25 发布

原创最新推荐文章于 2025-03-24 10:35:25 发布 · 144 阅读

0 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

88 篇文章

订阅专栏

怎么设置min-width我还没搞懂

圣杯布局

稍微说明一下：

html代码中 middle部分首先要放在container的最前部分。然后是left,right

1.将三者都 float:left , 再加上一个position:relative (因为相对定位后面会用到）

2.middle部分 width:100%占满

3.此时middle占满了，所以要把left拉到最左边，使用margin-left:-100%

4.这时left拉回来了，但会覆盖middle内容的左端，要把middle内容拉出来，所以在外围container加上 padding:0 100px

5.middle内容拉回来了，但left也跟着过来了，所以要还原，就对left使用相对定位 left:-200px 同理，right也要相对定位还原 right:-100px

6.对于right来讲，设置margin-left为-100px，此时right的右边缘正好在middle的右边缘，覆盖住middle的内容，由于container有padding为100px，因此再设置right的right=-100px即可

7.到这里大概就自适应好了。如果想container高度保持一致可以给left middle right都加上min-height:50px，清除浮动的影响还可以在container里面加入overflow：hidden

<style>
	        /*圣杯布局,为了中间div内容不被遮挡,给最外面包裹层加padding, 让 padding-left 和 padding-right 的数值等于left 和 right 的宽度，然后利用相对定位把他们再移动在两旁。 */
        .cantainer{
            padding:  0 100px;/* 留出左右的距离*/
            /*height: 100px;*/
            overflow: hidden;
        }
        .middle-04 {
            float: left;
            width: 100%;
            height: 50px;
            background-color: yellow;
           
        }
        .left-04 {
            float: left;
            width: 100px;
            margin-left: -100%;
            height: 50px;
            background-color: red;
            position: relative;
            left: -100px;
        }
        .right-04{
            float: left;
            width: 100px;
            height:50px;
            margin-left: -100px;
            background-color: green;
            position: relative;
            right: -100px;
        }

</style>
<body>
    <div class="cantainer">
        <!--主元素要放在文档流最前面-->
        <div class="middle-04"><span>div-middle</span></div>
        <div class="left-04"><span>div-left</span></div>
        <div class="right-04"><span>'ppp'</span></div>
    </div>
    <div class="footer">
    	rhthd
    </div>
</body>

双飞翼布局

双飞翼布局始于淘宝UED

如果把三栏布局比作一只大鸟，可以把container看成是鸟的身体，left和right则是鸟的翅膀。这个布局的实现思路是，先把最重要的身体部分放好，然后再将翅膀移动到适当的地方.

其实跟上边的圣杯布局差不多的，当然也可以改动一下（自己想想有哪些不同吧）

1.html代码中，middle-04要放最前边，

2.将middle-04，left，right都float:left

3.将middle-04占满 width:100%

4.此时middle-04占满了，所以要把left拉到最左边，使用margin-left:-100% 同理 extra使用margin-left:-100px

（这时可以直接继续上边圣杯布局的步骤，也可以有所改动）

5.middle-04内容被覆盖了，除了使用外围的padding，还可以考虑使用margin。

给middle-04增加一个内层div-- middle-05, 然后margin:0 100px

6.middle-04正确展示

7.注意middle-05高度是内容的高度哦，可以设定min-height；还可以给container清除浮动

<style>
	        /*圣杯布局,为了中间div内容不被遮挡,给最外面包裹层加padding, 让 padding-left 和 padding-right 的数值等于left 和 right 的宽度，然后利用相对定位把他们再移动在两旁。 */
        .cantainer{
            /*padding:  0 100px;/* 留出左右的距离*/
            /*height: 100px;*/
            overflow: hidden;
        }
        .middle-04 {
            float: left;
            width: 100%;
            height: 50px;
            background-color: yellow;
           
        }
        .left-04 {
            float: left;
            width: 100px;
            margin-left: -100%;
            height: 50px;
            background-color: red;
            position: relative;
            /*left: -100px;*/
        }
        .right-04{
            float: left;
            width: 100px;
            height:50px;
            margin-left: -100px;
            background-color: green;
            position: relative;
            /*right: -100px;*/
        }
        .middle-05{
        	margin: 0 100px;
        	min-height: 50px;
        }

</style>
<body>
    <div class="cantainer">
        <!--主元素要放在文档流最前面-->
        <div class="middle-04">
        	<div class="middle-05">
        		<span>div-middle</span>
        	</div>
        </div>
        <div class="left-04"><span>div-left</span></div>
        <div class="right-04"><span>'ppp'</span></div>
    </div>
    
</body>

图同上

总结

圣杯布局与双飞翼布局大同小异，网上经典的区别图是这个
在这里插入图片描述
因为圣杯布局是外部的container设置了padding，从而使middle自动的整体缩小
而双飞翼布局是保持middle不动，在middle内部增加一个新的div，设置新的div的margin属性，将内容添加到新的div中。