第一种方法：绝对定位
<!DOCTYPE html> <html> <head> <title>三列布局</title> <link rel="stylesheet" type="text/css" href="task0001.css"> </head> <body> <div class="wrap"> <div>三列布局1</div> <div class="one col-3-one">one</div> <div class="three col-3-three">three</div> <div class="two col-3-two">two</div> </div> </body> </html>
.wrap { position: relative; } .one{ width: 40px; background: blue; } .two { background: yellow; } .three { width: 40px; background: red; } .col-3-one { position: absolute; left: 0px; } .col-3-three { position: absolute; right: 0px; } .col-3-two { position: static; margin-left: 40px; margin-right: 40px; }
第二种方法：浮动定位
<!DOCTYPE html> <html> <head> <title>三列布局</title> <link rel="stylesheet" type="text/css" href="task0001.css"> </head> <body> <div > <div>三列布局2</div> <div class="one col-3-one-float">one</div> <div class="three col-3-three-float">three</div> <div class="two col-3-two">two</div> </div> </body> </html>
.wrap { position: relative; } .one{ width: 40px; background: blue; } .two { background: yellow; } .three { width: 40px; background: red; } .col-3-two { position: static; margin-left: 40px; margin-right: 40px; } .col-3-one-float { float: left; } .col-3-three-float { float: right; }
两种方法本质上的差别不大，结构都是两个脱离文档流的div和一个直接以文档流定位的div。
文档流是文档中可显示对象在排列中所占的位置。而浮动和绝对定位都是不占空间。
注意：
1.使用绝对定时时，其父元素是被定位的（就是position是除了static的），如果没有被定位的父元素，则相对于body被定位
2.两个脱离文档流的div都需要在正常div的上方，否则第二个div会占满屏幕，而第三个脱离文档流的div被直接挤到下方。