三列自适应布局
Posted HuangRong
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了三列自适应布局相关的知识,希望对你有一定的参考价值。
第一类,浮动在前:
<div class="left"></div> <div class="right"></div> <div class="main"></div>
方法一:float+margin
.main { margin-left: 150px; margin-right: 100px; } .left { float: left; width: 150px; } .right { float: right; width: 100px; }
方法二:float+BFC
.main { overflow: hidden; } .left { float: left; width: 150px; } .right { float: right; width: 100px; }
第二类,主要内容在前:
方法三:float+负边距+relative
<div class="main"></div> <div class="left"></div> <div class="right"></div>
这里和两列布局有些不同,在两列布局中,.main只需要右移给.left空出位置就可以了,所以给他一个margin-left就能解决。而在三列布局中,他不仅需要给.left腾出空间,还要给.right腾出空间,此时margin已经无能为力了,所以需要他们三个外面的盒子来做这件事情:
body { padding-left: 150px; padding-right: 100px; }
这样子就会产生一个问题,给body添加了padding之后,.main的宽度就减小了,这就意味着.left的margin-left值也会减小,于是,当.main的宽度减小到小于.left的宽度时,.left的负边距已经不能为他创造足够的空间到上面一行了,他就会被挤下去。所以,为了避免这个问题,需要给包裹盒子设置一个最小宽度,当屏幕宽度小于这个值时,他将不再收缩。
.main { float: left; width: 100%; } .left { float: left; position: relative; left: -150px; margin-left: -100%; width: 150px; } .right { float: left; position: relative; right: -100px; margin-left: -100px; width: 100px; } body { min-width: 150px; padding-left: 150px; padding-right: 100px; }
方法四:float+负边距+新盒子
<div class="main"> <div class="main-content"></div> </div> <div class="left"></div> <div class="right"></div>
这时的问题是,当屏幕宽度小于.left和.right宽度之和时,.main-content即中间那列已经完全被挤没了,所以,同样需要给他们外面的盒子设置一个最小宽度:
.main { float: left; width: 100%; } .left { margin-left: -100%; float: left; width: 150px; } .right { margin-left: -100px; float: left; width: 100px; } .main-content { margin-left: 150px; margin-right: 100px; } body { min-width:500px; }
方法五:flexbox
<div class="container"> <div class="main"></div> <div class="left"></div> <div class="right"></div> </div>
.container { min-width: 500px; display: flex; } .main { margin: 0 10px; order: 1; flex: 1; } .left { width: 150px; } .right { order:2; width: 100px; }
以上是关于三列自适应布局的主要内容,如果未能解决你的问题,请参考以下文章
css自适应布局(两列自适应布局+三列左右固定中间自适应+三列中间固定左右自适应)