左側中間定寬，右側自適應：
因邊左側跟中間都是定寬的，只有右側是自適應寬度的，所以這個三列浮動是和兩列浮動中的左側定寬右側自適應一樣的道理，HTML結構代碼如下：
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>CSS浮動</title>
</head>
<body>
<div id=”a”>我是左邊</div>
<div id=”b”>我是中間</div>
<div id=”c”>我是右邊</div>
</body>
</html>
只需在兩列浮動的CSS樣式代碼上再做輕微的改動：
#a{float:left; width:200px; background:#aaa;}
#b{float:left; width:200px; background:#f00;}
#c{background:#777; margin-left:400px;}
當然這裡要記住一點，那就是必須給b對象一個左浮動。
左側自適應，中間右側定寬：
與左側中間定寬右側自適應一樣的道理，當然前提是要把a、b、c三個對象在HTML的結構代碼上更換一下順序，瀏覽器的解釋順序應該是c-b-a，因為浮動在未浮動之前：
<body>
<div id=”c”>我是左邊</div>
<div id=”b”>我是中間</div>
<div id=”a”>我是右邊</div>
</body>
CSS代碼如下：
#a{background:#aaa;}
#b{float:right; width:200px; background:#f00;}
#c{float:right; width:200px; background:#777;}
左右兩側定寬，中間自適應：
這個布局應該是用得最多的，因為兩邊側邊欄的定寬，然後中間內容區自適應，這是很多網站常用的布局方式。很多人會在這裡使用四個DIV來完成布局，即：
<body>
<div id=”a”>我是左邊</div>
<div id=”box”>
<div id=”b”>我是中間</div>
<div id=”c”>我是右邊</div>
</div>
</body>
通過一個嵌套的DIV來協助完成三列浮動，這樣的確是可以完成浮動布局的目的，但是不用這個嵌套仍然可以完成三列浮動的目的，既然可以省略一個嵌套，那為什麼不省略一個呢？僅僅只需改變b跟c兩者的順序即可達到目的：
<body>
<div id=”a”>我是左邊</div>
<div id=”c”>我是右邊</div>
<div id=”b”>我是中間</div>
</body>
CSS代碼如下：
#a{float:left; width:200px; background:#aaa;}
#b{margin-left:200px; margin-right:200px; background:#f00;}
#c{float:right; width:200px; background:#777;}
這樣，在基於兩列浮動的基礎之上，三列浮動的布局也完成了。
以上就是CSS布局之浮動（二）內容，更多相關文章請關注topic.alibabacloud.com（www.php.cn）！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
