两列布局（浮动、定位、flex）和三列布局（圣杯、双飞翼、flex）-白红宇

两列布局（浮动、定位、flex）和三列布局（圣杯、双飞翼、flex）

阅读量：6533 次

发布时间：2019-06-24

本文共 3444 字，大约阅读时间需要 11 分钟。

demo 各种布局演示

两栏布局

浮动

.box1 .left{    float: left;    width: 100px;    height: 100px;    background: yellow;}.box1 .right {    margin-left: 100px;    height: 100px;    background: green;}

定位

.box2 {    position: relative;    width: 100%;    height: 100px;    overflow: hidden;}.box2 .left{    position: absolute;    width: 100px;    height: 100px;    background: yellow;}.box2 .right {    margin-left: 100px;    height: 100px;    width: 100%;    background: green;}

flex

.box3 {    display: flex;    height: 100px;    overflow: hidden;}.box3 .left {    width: 100px;    height: 100%;    background-color: red;}.box3 .right {    flex:1;    height: 100%;    background-color: greenyellow;}

三栏布局

圣杯布局


        
     
      三列布局是一种很常见的页面布局方式，三列一般分别是子列sub、主列main和附加列extra，其中子列一般是居左的导航，且宽度固定；主列是居中的主要内容，宽度自适应；附加列一般是广告等额外信息，居右且宽度固定。        圣杯布局和双飞翼布局都可以实现这种三列布局，他们有什么特别之处呢？
     
    
     
      left
     
    
     
      right

.container-grail {            height: 200px;            padding: 0 200px;        }        .container-grail .middle {            width: 100%;            height: 200px;            background-color: deeppink;            float:left;            min-height: 200px;        }        .container-grail .left {            width: 200px;            height: 200px;            background: blue;            float: left;            margin-left: -100%;            position: relative;            left: -200px;            min-height: 200px;        }        .container-grail .right {            width: 200px;            height: 200px;            background: green;            float: left;            margin-left: -200px;            position: relative;            right: -200px;            min-height: 200px;        }        .footer{            clear: both;        }

双翼布局

.container-fly {            height: 200px;        }        .container-fly .main, .container-fly .left, .container-fly .right {            float: left;            min-height: 200px;        }        .container-fly .left {            margin-left: -100%;            width: 200px;            background: red;        }        .container-fly .right {            margin-left: -200px;            width: 200px;            background: blue;        }        .container-fly .main {            width: 100%;        }        .container-fly .main-inner {            margin: 0 200px 0 200px;            min-height: 200px;            background: green;        }        .footer{            clear: both;        }

flex


        
     
      我是主体(优先加载)
     
    
     
      左边(固定宽度)
     
    
     
      右边(固定宽度)

.container-flex {    display: flex;}.container-flex div {    height: 100px;}.container-flex .left {    order: -1}.container-flex .main {    flex-grow: 1;    background: red;}.container-flex .left, .container-flex .right {    width: 200px;    background: greenyellow;}

相同点

圣杯和双飞翼布局解决问题一半是相同的，三栏全部float浮动，左右两栏加上负margin让其跟中间栏div并排，以形成三栏布局

不同在

圣杯布局，为中间的div内容不被遮挡，将中间div设置了左右padding，将左右两个div用相对布局position:relative分别配合right和right属性，以便左右两栏div移动后不遮挡中间div

双飞翼布局，为了中间div内容不被遮挡，之间在中间div内容创建子div用于放置内容，在该div里用margin为左右两栏div留出位置

参考

转载于:https://www.cnblogs.com/mayufo/p/7299255.html

你可能感兴趣的文章