内容简介:上面实现方式优点,实现简单兼容性好缺点:根据渲染的规则,从上到下,也就是说left和right会优先渲染, center部分会最后渲染.利用负margin来完成
常用方式罗列
- float
- absolute
- table
- flex
- grid
float
<div class="container"> <div class="left">left</div> <div class="right">right</div> <div class="center">center</div> </div>
.container { overflow: auto; } .left { width: 200px; float: left; background-color: #1ABC9C; } .right { width: 200px; float: right; background-color: #2ECC71; } .center { margin-left: 200px; margin-right: 200px; background-color: #3498DB; }
上面实现方式优点,实现简单兼容性好
缺点:根据渲染的规则,从上到下,也就是说left和right会优先渲染, center部分会最后渲染.
优化方式-1
利用负margin来完成
<div class="container"> <div class="center"> <p>center</p> <p>center</p> <p>center</p> <p>center</p> <p>center</p> <p>center</p> <p>center</p> </div> <div class="left">left</div> <div class="right">right</div> </div>
.container { overflow: auto; } .left, .right, .center { box-sizing: border-box; } .left { width: 200px; float: left; background-color: #1ABC9C; margin-left: -100%; } .right { width: 200px; float: right; // float:left; background-color: #2ECC71; margin-left: -200px; } .center { float: left; width: 100%; padding-left: 200px; padding-right: 200px; background-color: #3498DB; }
完成前面主要内容优先加载问题,但是又有新问题,当主体内容过长的时,发现背景(边框、背景图等等)影响到了两侧
如果只处理背景问题可以使用下面方式
.center { background-clip: content-box }
如果有边框、背景图片等显然上面不能满足。
优化方式二 (圣杯布局)
<div class="container"> <div class="center"> <p>center</p> <p>center</p> <p>center</p> <p>center</p> <p>center</p> <p>center</p> <p>center</p> </div> <div class="left">left</div> <div class="right">right</div> </div>
.container { margin:0 200px; position: relative; } .left, .right, .center { box-sizing: border-box; } .center { float: left; width: 100%; background-color: #3498DB; } .left { position: relative; left:-200px; float: left; width: 200px; margin-left: -100%; background-color: #1ABC9C; } .right { position: relative; right:-200px; float: right; width: 200px; margin-left: -200px; background-color: #2ECC71; }
优化方式三: (双飞翼布局) 给 center 元素包裹一个容器
<div class="container"> <div class="center-warpper"> <div class="center"> <p>center</p> <p>center</p> <p>center</p> <p>center</p> <p>center</p> <p>center</p> <p>center</p> </div> </div> <div class="left">left</div> <div class="right">right</div> </div>
.container { overflow: auto; } .left, .right, .center, .center-warpper { box-sizing: border-box; } .center-warpper { float:left; width: 100%; padding-left: 200px; padding-right: 200px; } .center { width: 100%; overflow: auto; background-color: #3498DB; } .left { width: 200px; float: left; background-color: #1ABC9C; margin-left: -100%; } .right { width: 200px; float: right; background-color: #2ECC71; margin-left: -200px; }
处理方式二和三解决方式非常类似,只是处理的细节不一样. 具体用那个都可以一般推荐用前者
absolute
<div class="container"> <div class="center"> <p>center</p> <p>center</p> <p>center</p> <p>center</p> <p>center</p> <p>center</p> <p>center</p> </div> <div class="left">left</div> <div class="right">right</div> </div>
.container { position: relative; } .left, .right, .center { box-sizing: border-box; } .center { position: absolute; left: 200px; right: 200px; background-color: #3498DB; } .left { position: absolute; left: 0; width: 200px; background-color: #1ABC9C; } .right { position: absolute; right: 0; float: right; width: 200px; background-color: #2ECC71; }
table
<div class="container"> <div class="left">left</div> <div class="center"> <p>center</p> <p>center</p> <p>center</p> <p>center</p> <p>center</p> <p>center</p> <p>center</p> </div> <div class="right">right</div> </div>
.container { position: relative; display: table; width: 100%; } .left, .right, .center { box-sizing: border-box; display: table-cell; } .center { background-color: #3498DB; } .left { width: 200px; background-color: #1ABC9C; } .right { width: 200px; background-color: #2ECC71; }
flex
<div class="container"> <div class="left">left</div> <div class="center"> <p>center</p> <p>center</p> <p>center</p> <p>center</p> <p>center</p> <p>center</p> <p>center</p> </div> <div class="right">right</div> </div>
.container { position: relative; display: flex; width: 100%; } .left, .right, .center { box-sizing: border-box; display: table-cell; } .center { background-color: #3498DB; flex:1; } .left { width: 200px; background-color: #1ABC9C; } .right { width: 200px; background-color: #2ECC71; }
Grid
<div class="container"> <div class="left">left</div> <div class="center"> <p>center</p> <p>center</p> <p>center</p> <p>center</p> <p>center</p> <p>center</p> <p>center</p> </div> <div class="right">right</div> </div>
.container { position: relative; display: grid; width: 100%; grid-template-columns: 200px auto 200px; } .left, .right, .center { box-sizing: border-box; } .center { background-color: #3498DB; } .left { background-color: #1ABC9C; } .right { background-color: #2ECC71; }
上面就是实现的几种方式, 细心同学应该可以看到 float、absoulut 这两种方式左右两列并不会随着中间内容区域高度变化而变化。
如果想要创建三列布局中间自适应,且三列都等高的话选择 table、flex、Grid;
具体兼容可查阅 兼容性查看
如果有更好的方式,大家可以在评论区给出; 一起讨论学习
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- 自适应布局
- 左侧固定,右侧自适应的布局方案
- 巧用flex布局实现左侧文字溢出省略,右侧文字自适应。
- Android XML灵活布局之 EditText实现自适应高度同时限制最小和最大高度
- 伯克利提出高效在线适应算法,让机器人拥有快速适应环境变化的新能力
- 浅谈Web自适应
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。