css多栏布局(双栏布局、三栏布局、圣杯布局、双飞翼布局)

1.两栏布局

两栏布局的核心是左栏固定宽度，右栏宽度自适应

html结构为

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

方式一

左栏浮动+固定宽度

右栏宽度auto+margin偏移

.outer{
    height: 500px;
    background-color: black;

}
.left{
    height: 100%;

    float: left;
    width: 200px;
    background-color: red;
    

}
.right{

    height: 100%;

    margin-left: 200px;
    width: auto;
    background-color: blue;
}

---

方式二

左栏浮动+固定宽度

右栏设置overflow:hidden(目的是产生bfc,不与左栏重叠)

.outer{
    height: 500px;
    background-color: black;

}
.left{
    height: 100%;

    float: left;
    width: 200px;
    background-color: red;
    

}
.right{

    height: 100%;

    overflow: hidden;
   
    background-color: blue;
}

---

方式三

父级设置flex布局

左栏固定宽度

右栏flex:1

.outer{
    height: 500px;
    background-color: black;
    display: flex;

}
.left{
    


    width: 200px;
    background-color: red;
    

}
.right{

    flex: 1;
    background-color: blue;
}

---

方式四

父级相对定位

左栏绝对定位

右栏设置margin-left

.outer{
    height: 500px;
    background-color: black;
    position: relative;

}
.left{
    height: 100%;

    position: absolute;
    width: 200px;

    background-color: red;
    

}
.right{

   height: 100%; 

   margin-left: 200px;
   background-color: blue;
}

---

方式五

父级相对定位

左栏固定宽度

右栏绝对定位+偏移

.outer{
    height: 500px;
    background-color: black;
    position: relative;

}
.left{
    height: 100%;

    
    width: 200px;

    background-color: red;
    

}
.right{

   height: 100%; 

   position: absolute;

    left: 200px;
    bottom: 0;
    top: 0;
    right: 0;
   
   background-color: blue;
}

2.三栏布局

三栏布局的核心是左右两栏固定宽度,中间一栏宽度自适应

dom结构为

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

方式一

左栏左浮动 固定宽度

右栏右浮动 固定宽度

中间一栏设置左右偏移 并且处于html结构的最后

.outer{
    height: 500px;
    background-color: black;

}
.left{
    height: 100%;

    width: 200px;
    float: left;
    background-color: red;

}

.center{
    height: 100%;


    margin-left: 200px;
    margin-right: 200px;
    background-color: green;

}

.right{

    height: 100%;

    width: 200px;

    float: right;
   
    background-color: blue;
}

---

方式二

左右栏绝对定位

中间一栏设置偏移

.outer{
    height: 500px;
    background-color: black;
    position: relative;

}
.left{
    height: 100%;
    width: 200px;
    position: absolute;
    background-color: red;

}

.center{
    height: 100%;
    margin-left: 200px;
    margin-right: 200px;
    background-color: green;

}

.right{

    height: 100%;
    position: absolute;
    width: 200px;
    right: 0;
    top: 0;
    background-color: blue;
}

---

方式三

父级设置flex布局

左右栏固定宽度

中间一栏设置flex:1

.outer{
    height: 500px;
    background-color: black;
    display: flex;

}
.left{

    width: 200px;
   
    background-color: red;

}

.center{

    flex: 1;
    background-color: green;

}

.right{

    width: 200px;
   
    background-color: blue;
}

---

圣杯布局

方法:

1.给三栏都设置左浮动 让中间一栏占宽百分百,使得左右两栏下移

2.给中间一栏设置左右padding，用来给左右两栏设置存放空间

3.设置左栏的margin-left为-100%,这样左栏就会移动到中间一栏的最左边

4.给右栏设置margin-left为负的右栏的宽度,这样右栏就会移动到中间一栏的最右边

5.左右两栏使用相对定位进行偏移,移动到之前给他们准备好的空间中

为什么margin-left为负数会使元素上移?

答:浏览器会判断margin-left与元素宽度,如果margin-left+width<0,浏览器就会认为元素的宽度小于0，

​ 上一层是可以容纳这个元素的,于是就会上移

.outer{
    height: 500px;
    background-color: black;
    padding-left: 200px;
    padding-right: 200px;

}
.left{

    position: relative;
    left: -200px;

    float: left;
    margin-left: -100%;

    width: 200px;
    height: 100%;
   
    background-color: red;

}

.center{

    width: 100%;
    height: 100%;
    float: left;
    background-color: green;

}

.right{

    position: relative;
    left: 200px;

    float: left;
    margin-left: -200px;


    width: 200px;
    height: 100%;
   
    background-color: blue;
}

---

双飞翼布局

方法:与圣杯布局类似,不同点是双飞翼布局给左右两栏留空间是这样做的:

在中间div中新增一个div(inside),给inside设置margin偏移.这样就给

左右两栏留下了空间

html结构

<div class="outer">
        <div class="center">
            <div class="inside">

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

.outer{
    height: 500px;
    background-color: black;
    

}
.left{

    float: left;
    margin-left: -100%;

    width: 200px;
    height: 100%;
   
    background-color: red;
    

}

.center{

    float: left;
    height: 100%;
    width: 100%;


}
.inside{
    margin-left: 200px;
    margin-right: 200px;
    height: 100%;
    background-color: grey;
}

.right{

   
    float: left;
    margin-left: -200px;


    width: 200px;
    height: 100%;
   
    background-color: blue;
}