方法一
绝对定位
<!DOCTYPE html>
<html>
<head>
<title>三列布局</title>
</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>
css样式
1 .wrap { 2 position: relative; 3 } 4 5 .one{ 6 width: 40px; 7 height:100px; 8 background: blue; 9 } 10 11 .two { 12 height:100px; 13 background: yellow; 14 } 15 16 .three { 17 height:100px; 18 width: 40px; 19 background: red; 20 } 21 22 .col-3-one { 23 position: absolute; 24 left: 0px; 25 } 26 27 .col-3-three { 28 position: absolute; 29 right: 0px; 30 } 31 32 .col-3-two { 33 position: static; 34 margin-left: 40px; 35 margin-right: 40px; 36 }
方法二:
浮动
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>三列布局</title> 5 </head> 6 <body> 7 8 9 <div > 10 <div>三列布局2</div> 11 <div class="one col-3-one-float">one</div> 12 <div class="three col-3-three-float">three</div> 13 <div class="two col-3-two">two</div> 14 </div> 15 </body> 16 </html>
css代码
1 .wrap { 2 position: relative; 3 } 4 5 .one{ 6 width: 40px; 7 height:100px; 8 background: blue; 9 } 10 11 .two { 12 height:100px; 13 background: yellow; 14 } 15 16 .three { 17 height:100px; 18 width: 40px; 19 background: red; 20 } 21 22 .col-3-two { 23 position: static; 24 margin-left: 40px; 25 margin-right: 40px; 26 } 27 28 .col-3-one-float { 29 float: left; 30 31 } 32 33 .col-3-three-float { 34 float: right; 35 }
注意第二种方法(浮动)
在html的布局中,第三个(最右边的)div必须放在中间,也就是说第三个浮动流必须放在正常流的上面,否则,会导致第二个div会占满屏幕，而第三个脱离文档流的div被直接挤到下方。