三栏布局(双飞翼、圣杯、绝对定位、浮动、flex布局)

喵半仙

于 2019-10-15 00:26:02 发布

阅读量432

点赞数

分类专栏： css总结文章标签：三栏布局双飞翼布局圣杯布局 flex布局

本文链接：https://blog.csdn.net/weixin_45432334/article/details/102492393

版权

本文详细介绍了四种三栏布局方法：双飞翼布局、圣杯布局、浮动布局和flex布局。双飞翼布局与圣杯布局在效果上相似，但实现方式有所不同，双飞翼布局更简洁，少用一些CSS属性。而flex布局则提供了一种更现代、灵活的解决方案。

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

一、浮动和负边距（双飞翼和圣杯布局）

1、双飞翼布局

实现：

· left、center、right三种都设置左浮动
·设置center宽度为100%
· 设置负边距，left设置负边距为100%，right设置负边距为自身宽度
·设置content的margin值为左右两个侧栏留出空间，margin值大小为left和right宽度

html:

<div class="wrap">
        <div class="center">
        	<div>这是中间 这是中间 这是中间/div>
        </div>
        <div class="left"></div>
        <div class="right"></div>
    </div>

css:

.wrap{
   
    width: 80%;
    border: 1px red solid;
    overflow: hidden;
    box-sizing:border-box;
}
.wrap>div{
   
    height: 300px;
}
.left{
   
    float: left;
    width: 200px;
    background-color: green;
    margin-left: -100%;
}
.right{
   
    float: left;
    width: 250px;
    background-color: blue;
    margin-left: -250px;
}
.center{
   
    float: left;
    width<