如何实现三栏布局 (圣杯布局, 双飞翼布局)? 下面本篇文章给大家介绍一下实现三栏布局(圣杯布局, 双飞翼布局) 的四种方法. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
圣杯布局, 双飞翼布局, 本质上都是三栏布局──中间自适应两边固定宽.
圣杯布局
圣杯 html 结构:
- <div class='main'>
- <div class="middle">中间的</div>
- <div class="left">左边的</div>
- <div class="right">右边的</div>
- </div>
双飞翼布局
双飞翼 HTML 结构为:
- <div class='main'>
- <div class="middle">
- <div class="inner_middle">中间的</div>
- </div>
- <div class="left">左边的</div>
- <div class="right">右边的</div>
- </div>
一, float+margin
- <style type="text/CSS">
- .main{
- overflow: hidden;
- background: #eee;
- }
- .left{
- background: red;
- width: 200px;
- height: 280px;
- float: left;
- }
- .right{
- background: blue;
- width: 200px;
- height: 290px;
- float: right;
- }
- .middle{
- background: green;
- height: 300px;
- margin-left: 200px;
- margin-right: 200px;
- }
- </style>
- <div class="main">
- <div class="left"></div>
- <div class="right"></div>
- <div class="middle"></div>
- </div>
说明: 网上还有人用 padding 替换 margin 的方法, 感兴趣的自己去查.
二, Position
- <style type="text/css">
- .main{
- position: relative;
- }
- .left{
- background: red;
- height: 300px;
- width: 200px;
- position: absolute;
- left: 0;
- top: 0;
- }
- .right{
- background: blue;
- height: 300px;
- width: 200px;
- position: absolute;
- right: 0;
- top: 0;
- }
- .middle{
- background: green;
- height: 300px;
- width: 100%;
- }
- </style>
- <div class="main">
- <div class="left"></div>
- <div class="center"></div>
- <div class="middle"></div>
- </div>
说明: 网上有人提到这个方法在某些情况下会出现 bug, 具体没有深入了解过.
三, Flex
- <style type="text/css">
- .main{
- display: flex;
- align-items: center;
- }
- .left{
- background: red;
- width: 200px;
- height: 300px;
- }
- .right{
- background: blue;
- width: 200px;
- height: 300px;
- }
- .middle{
- background: green;
- height: 300px;
- width: 100%;
- }
- </style>
- <div class="main">
- <div class="left"></div>
- <div class="middle"></div>
- <div class="right"></div>
- </div>
说明: 低版本的浏览器有兼容的问题, 在网上也看到有人用 order 控制位置
四, Grid
- <style type="text/css">
- .main{
- display: grid;
- height: 300px;
- }
- .left{
- background: red;
- grid-row:1;
- grid-column:1/2;
- }
- .right{
- background: blue;
- grid-row:1;
- grid-column:4/5;
- }
- .middle{
- background: green;
- grid-row:1;
- grid-column:2/4;
- }
- </style>
- <div class="main">
- <div class="left"></div>
- <div class="middle"></div>
- <div class="right"></div>
- </div>
说明: grid-column 一共分为 5 个格,"grid-column:1/2" 占了第一个和第二个格, 不是指占了二分之一. 这个方法兼容性有比较大的问题, 网上有不少文章提到浏览器还没有提供支持, 实际上新版主流浏览器已经支持了.
本文转载自: https://segmentfault.com/a/1190000018183056
更多 web 前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/web/css/17223.html