慕課筆記利用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進行布局【三列布局】