慕課筆記利用css進行布局【三列布局】
阿新 • • 發佈:2017-07-29
cnblogs middle ddl image ext -1 技術 http width
三個div中間自適應,兩側固定大小
<html> <head> <title>三列布局</title> <style type="text/css"> body{margin:0;padding:0;text-align:center} /*三列的布局樣式*/ /*position:absolute定位*/ .left2{width:200px;height:500px;background:#f0f;position:absolute;left:0;top:0} .middle{height:500px;background:#f00;margin:0 310px 0 210px} .right2{width:300px;height:500px;background:#ff0;position:absolute;right:0;top:0} </style> </head> <body> <div class="left2">200px</div> <div class="middle">ssssssssssssssssssss 三列的布局樣式,兩側固定像素,采用定位的方式</div> <div class="right2">300px</div> </body> </html>
效果如下:
關鍵知識點:
利用position:absolute定位,中間div不設置寬度,中間div的margin值取決於兩側div的寬度
慕課筆記利用css進行布局【三列布局】