水平三欄式布局
來源：程序員人生 發布時間：2014-11-14 08:42:10 閱讀次數：3180次
昨天被百度的大牛http://www.jyygyx.com/cxyms/到了這個問題，我竟回答的莫名其妙。想自殺，現在揮淚總結。
布局以下：
<div id="left">左側欄</div>
<div id="main">主內容</div>
<div id="right">右側欄</div>
第1種實現方式：
利用定位，left和right分別左定位和右定位，并設置寬度，比如220px，中間的main要設置margin，給left和right預留出位置220px。以下：
<style type="text/css">
html,body{
padding:0;
margin:0;
}
#left,
#right {
position: absolute;
top:0;
width: 220px;
height: 100px;
}
#left {
left: 0;
background: red;
}
#right {
right:0;
background: green;
}
#main {
margin:0 230px;
height: 100px;
background: yellow;
}
</style>
第2種方式：用浮動實現
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF⑻">
<title>Document</title>
<!-- two -->
<style type="text/css">
#left,
#right {
width: 220px;
height: 200px;
background: blue;
}
#right {
float: right;
}
#left{
float: left;
}
#main {
background: red;
height: 200px;
}
</style>
</head>
<body>
<!-- two -->
<div id="left">左側欄</div>
<div id="right">右側欄</div>
<div id="main">主內容</div>
</body>
</html>
要注意left左浮動，right右浮動，main不浮動，但是，寫的時候要先寫right，后寫main，由于right要右浮動。
生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
