相關：《左邊固定，右邊自適應及左邊自適應，右邊固定布局的幾種方法》【更全】
最近在學習各種CSS知識，特別是制作網站常用的，比如今天來分享的一個CSS。 在制作zblog模板時候經常會用到一側欄固定寬度，另一側欄可以自適應寬度，特別是一些zblog博客、CMS主題常用到。
如上圖所示，是我寫出來的比較簡單的CSS，可以實現左側欄固定寬度，右側欄會自適應寬度與高度。（紅色線條是左側欄固定的寬和高）
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS：左側欄固定寬度，右側欄自適應寬度</title>
</head>
<body>
<style>
.wrap{}
.wl{width: 200px; border: 1px solid #f35; float: left;}
.wr{width: 99%; border: 1px solid #000; }
.wrrrr{margin-left: 200px;}
</style>
<div class="wrap">
<div class="wl">
固定寬度左側固定寬度左側固定寬度左側固定寬度左側固定寬度左側固定寬度左側固定寬度左側固定寬度左側固定寬度左側<br><br><br><br><br><br><br><br><br><br><br>
</div>
<div class="wr">
<div class="wrrrr">右側自適應寬度右側自適應寬度右側自適應寬度右側自適應寬度右側自適應寬度右側自適應寬度右側自適應寬度右側自適應寬度右側自適應寬度右側自適應寬度右側自適應寬度右側自適應寬度右側自適應寬度應寬度右側自適應寬度右側自適應寬度右側自適應寬度右側自適應寬度右側自適應寬度右側應寬度右側自適應寬度右側自適應寬度右側自適應寬度右側自適應寬度右側自適應寬度右側應寬度右側自適應寬度右側自適應寬度右側自適應寬度右側自適應寬度右側自適應寬度右側應寬度右側自適應寬度右側自適應寬度右側自適應寬度右側自適應寬度右側自適應寬度右側應寬度右側自適應寬度右側自適應寬度右側自適應寬度右側自適應寬度右側自適應寬度右側</div>
</div>
</div>
</body>
</html>如果需要右側欄固定寬度，而左側欄可以自適應寬度呢？繼續分享：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>右側欄固定寬度，左側欄寬度自適應CSS</title>
</head>
<style>/* 兩列左側自適應布局 */
.wrap{border: 1px solid #000; overflow: hidden;}
.wleft{float:left;width:99.5%; border: 0px solid #f35;}
.wleftc{margin-right:240px;}
.wright{position:relative;
float:right;
width:230px;margin-left:-240px;
border: 1px solid blue;}
</style>
<body>
<div class="wrap">
<div class="wleft">
<div class="wleftc">
<p>左側自適應左側自適應左側自適應左側自適應左側自適應左側自適應左側自適應左側自適應左側自適應左側自適應左側自適應左側自適應左側自適應左側自適應左側自適應
適應左側自適應左側自適應左側自適應左側自適應左側自適應左側自適應左側自適應左側自適應左側自適應左側自適應左側自適應左側自適應左側自適應左<br><br><br><br><br></p>
</div>
</div>
<div class="wright">
<p>右側定寬<br><br><br><br></p>
</div>
</div>
</body>
</html>在制作zblog各種模板的時候就可以用上了。