                        課程
                    
                        /前端開發
                        
                            /HTML/CSS
                        
                        /如何用CSS進行網頁布局

關于三列布局，中間自適應的布局方法

doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<style>
*{margin:0;padding:0px;}
.wrap{width:960px; margin:0 auto;}
.left{width:200px;height:100px;background:#009;float:left;}
.middle{background:#3F3;height:100px;border:1px solid #000;margin:0 300px 0 200px;}
.right{width:300px;height:100px;background:#9F0;float:right;}
</style>
</head>

<body>
<div class="wrap">
<div class="left">200px</div>
<div class="right">300px</div>
<div class="middle">自適應寬度</div>
</div>

</body>

效果是一樣的，用float處理，只不過不class=“middle”方在right后。當right又浮動后，脫離文檔流。是中間一列在中間顯示，在設置margin將蓋注部分顯示出來，不過div順序不是很正常，不夠標準語義化。

陳_chen

2015-08-13

源自：如何用CSS進行網頁布局 4-1

關注問題我要回答

840

操作

收起

4 回答

慕田峪7213717
2015-11-17

我是這么理解的，因為瀏覽器是按代碼順序解析的，left和right先寫的話就被先漂浮起來脫離了文檔流，這時候middle的margin的參照物就剩下父級的body，所以再左右一定，就完成了這樣的效果。如果先寫middle再寫right，因為middle出現的時候right還沒有浮動，所以middle的marigin-right屬性的參照物還是right，這樣的話300px就等于把middle和right要分開300px，所以right就被擠下去了。