1.三列布局
1.1自身浮动法
此代码较简单,左栏左浮动,右栏右浮动,主栏内容放在最后,用margin 值为左右的宽度来实现自适应
==注意:不浮动的元素要放在浮动元素后面==
代码如下:
<head>
<style type="text/css">
body{
padding:0;
margin:0;
}
.left{
width:100px;
height:200px;
background-color:yellow;
float:left;
}
.middle{
height:300px;
background-color:red;
margin:0 200px 0 100px;
}
.right{
width:200px;
height:200px;
background-color:blue;
float:right;
}
</style>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
<div class="middle"></div><!--中间的一定要放在浮动元素之后-->
</body>
1.2绝对定位法
此方法与自身浮动法相似,但是使用的是绝对定位,左右两栏采用绝对定位,分别固定于页面的左右两侧,中间的主题栏采用左右的margin值来撑开距离
注意:采用浮动的方法时,浮动元素本身会占据其位置(对不浮动的元素来说,都浮动的元素不占据位置,此处需理解文档流和浮动流),后面不浮动的元素跟随在后,但是绝对布局不会占据位置,后面的内容会被覆盖
代码如下:
<style type="text/css">
body{
padding:0;
margin:0;
}
.left{
width:100px;
height:200px;
position:absolute;
background-color:yellow;
left:0;
top:0;
}
.middle{
height:200px;
background-color:red;
margin:0 200px 0 100px;
}
.right{
width:200px;
height:200px;
position:absolute;
background-color:blue;
right:0;
top:0;
}
</style>
</head>
<body>
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</body>
1.3margin负值法
中间的主体使用双层标签,外层内容div宽度100%显示,并且浮动,内层div为真正的主体内容,左栏与右栏采用margin负值定位,左栏左浮动,margin-left值为-100%,右栏也为左浮动,其margin-left值为本身宽度值
==原理:==
主体内容浮动占据100%的位置,后面的元素依次浮动,然后使用margin相应的值来将其调整到本来的位置
<style type="text/css">
body{
padding:0;
margin:0;
}
.left,.right{
width:200px;
height:200px;
float:left;
background-color:yellow;
}
.middleMain{
float:left;
width:100%;/*让主体父级div全屏显示,通过%,随屏幕变化*/
}
.middle{
margin:0 210px;/* 通过margin值而不是width,设置主体的宽度,实现自适应 */
height:200px;
background-color:red;
}
.left{
/* 当使用margin左负值,超过自身的宽度时,这个元素在第一行就有位置了。而margin的负值达到-100%时,恰能达到窗口最左侧 */
margin-left:-100%;
}
.right{
/* 当使用margin左负值,超过自身的宽度时,这个元素在第一行就有位置了。*/
margin-left:-200px;
}
</style>
</head>
<body>
<div class="middleMain">
<div class="middle">Main</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</body>
注意:几个div的顺序,无论是左浮动还是右浮动,先是主体部分div,这是肯定的,至于左右两栏谁先谁后,都无所谓。测试后,效果达到了。
此方法的优点:三栏相互关联,可谓真正意义上的自适应,有一定的抗性——布局不易受内部影响。
缺点在于:相对比较难理解些,上手不容易,代码相对复杂。出现百分比宽度,过多的负值定位,如果出现布局的bug,排查不易。