你的位置:首页 > 网页设计

[网页设计]三列自适应布局


分析了两列自适应布局的实现思路后,会觉得三列自适应布局的实现原理其实和他一模一样,不过是多了一个盒子而已。

第一类,浮动在前:

<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;}