圣杯布局、双飞翼布局与flex布局实现-白红宇

圣杯布局、双飞翼布局与flex布局实现

阅读量：7143 次

发布时间：2019-06-28

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

圣杯布局与双飞翼布局的前半部分是相同的：

1）middle、left、right三栏全部浮动（float:left）；

2）middle中间栏放在文档流前优先渲染（因为浮动元素会把块级元素的位置空出来）；

3）footer元素中要用clear:both;清除浮动；

4）middle中间栏的宽度设为100%；left的margin-left应为-100%；right的margin-left应为-right元素的宽；

此时中间部分（middle）的内容会被左右遮挡，解决这个问题，圣杯布局与双飞翼布局的方法是不同的：

圣杯布局：

1）将left、middle、right放置在一个div中（class='bd'）；

2）将div的padding-left设为left元素的宽，padding-right设为right元素的宽；

2）此时left、right的位置也会发生改变，需要将其设为相对位置（position:relative），通过设置left或right属性移动元素；

双飞翼布局：

1）将middle中的内容放置在一个div（class='mi_ct'）中；

2）将这个div的margin-left设置为left元素的宽，margin-right设置为right元素的宽；

一、圣杯布局

1     /*header头部*/ 2      .hd { 3              background-color: #666; 4              /*内容居中*/ 5              display: flex; 6              justify-content: center; 7              align-items: center; 8              height: 50px; 9          }10          /*footer尾部*/11          .footer {12              background-color: #666;13              display: flex;14              justify-content: center;15              align-items: center;16              height: 30px;    17              /*清除浮动*/18              clear: both;19          }20          /*放置left、right、middle*/21          .bd {22              padding: 0 100px 0 200px;23          }24          /*middle部分*/25          .mi {26              background-color: red;27              float: left;28              width: 100%;29              height: 100px;30          }31          /*left部分*/32          .le {33              background-color: green;34              float: left;35              margin-left: -100%;36              width: 200px;37              position: relative;38              left: -200px;39              height: 100px;40          }41          /*right部分*/42          .ri {43              background-color: yellow;44              float: left;45              margin-left: -100px;46              width: 100px;47              position: relative;48              right: -100px;49             height: 100px;50          }

二、双飞翼布局

1     .hd { 2             background-color: #666; 3             display: flex; 4             justify-content: center; 5             align-items: center; 6             height: 50px; 7         } 8         .footer { 9             background-color: #666;10             display: flex;11             justify-content: center;12             align-items: center;13             height: 30px;14             clear: both;15         }16         .mi {17             background-color: red;18             float: left;19             width: 100%;20             height: 100px;21         }22         /*放置内容部分*/23         .mi_ct {24             margin-left: 200px;25             margin-right: 100px;26         }27         .le {28             background-color: green;29             float: left;30             margin-left: -100%;31             width: 200px;32             height: 100px;33         }34         .ri {35             background-color: yellow;36             float: left;37             margin-left: -100px;38             width: 100px;39             height: 100px;40         }

三、flex布局实现

1）需在外部用一个div（class='contan'）放置所有内容，display设为flex，并且可换行flex-wrap:wrap；

2）头部、尾部宽度为100%，将中间部分（bd）挤到中间；

3）中间（bd）宽度也为100%，display设为flex，使其中内容为三栏布局（left、right宽度固定，中间middle自适应（flex:1））；

1     .contain { 2             display: flex; 3             flex-wrap: wrap; 4             height: 300px; 5         } 6         .hd { 7             background-color: #666; 8             width: 100%; 9             height: 15%;10             display: flex;11             justify-content: center;12             align-items: center;13         }14         .footer {15             background-color: #666;16             width: 100%;17             height: 10%;18             display: flex;19             justify-content: center;20             align-items: center;21         }22         .bd {23             display: flex;24             width: 100%;25             height: 75%;26         }27         .mi {28             background-color: red;29             flex: 1;30             display: flex;31             justify-content: center;32             align-items: center;33         }34         .le {35             background-color: green;36             width: 200px;37             display: flex;38             justify-content: flex-start;39             align-items: center;40         }41         .ri {42             background-color: yellow;43             width: 100px;44             display: flex;45             justify-content: flex-end;46             align-items: center;47         }

转载于:https://www.cnblogs.com/liyuemeng/p/10769290.html

你可能感兴趣的文章