双飞翼布局的学习笔记~

最新推荐文章于 2024-09-27 10:45:57 发布

老少年的小迷妹

最新推荐文章于 2024-09-27 10:45:57 发布

阅读量156

点赞数

分类专栏： css 布局文章标签： css

本文链接：https://blog.csdn.net/qq_29049843/article/details/104862146

版权

双飞翼布局与圣杯布局类似，都利用浮动元素处理页面布局。区别在于双飞翼通过额外浮动元素包裹中间部分，设置margin和负外边距来避免中间元素被遮挡。当不使用额外元素时，负外边距计算会导致布局问题。通过添加middle元素，可以精确调整left元素的位置，实现理想效果。

摘要由CSDN通过智能技术生成

双飞翼布局相较于圣杯布局来说，两者都是采用了浮动元素，但在解决中间元素被挡住的问题时，圣杯布局采用的是为父元素设置padding-left和padding-right，为左边的元素设置position:relative和left属性解决；双飞翼布局则是额外使用一个浮动元素包裹中间元素，为中间元素设置margin-left和margin-right，再对左右元素设置负外边距来解决的。
那么，双飞翼布局为什么要增加一个额外的浮动元素包裹中间元素呢？
如果我们不使用额外的浮动元素，如下设置：

<style>
    *{
        margin: 0;        
    }   
    div{
        height: 300px;
    }
    .center,.left,.right{
        float: left;
    }
    .center{
        width: 100%;      
        background-color: slateblue;
        margin:0 150px 0 200px; 
    }   
     .left{           
        width: 200px;
        background-color: red;   
        margin-left: -100%;      
    }
    .right{    
        width: 150px;      
        background-color: green;
        margin-left: -150px;
    }  
</style>
<body>
    <div class="container">
        <div class="center">center</div>