經常佈局網頁，什麼情況都會碰到，比如這多個DIV寬度自適應，也就是做液態佈局，具體要用到“負值外補侗法（negative margins）。本示例如果你搞懂，你可以解決大多佈局問題，這是總一行三列的佈局，中間列分三行，其中中間列的中間行是自適應的，你可以運行看下效果。
效果鏈接：http://www.codefans.net/jscss/code/345.shtml
<%@ page language="java" pageEncoding="utf-8"%>
<!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=gb2312" />
<title>div + css寬度自適應（液態佈局）</title>
<style type="text/css">
<!--
body{margin:0;padding:0px;text-align:center;}
#wrap{margin:0 auto;text-align:left;}
/*左邊欄，設定寬度*/
.wrap_l{float:left;background:#FF0000;margin-right:-150px;width:150px;border:1px solid #333;}
/*中間欄，寬度auto www.codefans.net */
.wrap_m{width:auto;background:#00FF00;margin:0 140px 0 150px;border:1px solid #000;}
/*右邊欄，固定寬度*/
.wrap_r{float:right;background:#0000FF;margin-left:-140px;width:140px;border:1px solid #999;}
.wrap_inner_l{float:left;background:#00FFFF;margin-right:-200px;width:200px;}
.wrap_inner_m{width:auto;background:#FFFF00;margin:0 0 0 200px;}
-->
</style>
</head>
<body>
<div id="wrap">
<div class="wrap_l">
這是左邊部分1<br />
這是左邊部分2<br />
這是左邊部分3
</div>
<div class="wrap_r">
這是右邊部分4<br />
這是右邊部分5<br />
這是右邊部分6
</div>
<div class="wrap_m">
這是中間部分7
<div class="wrap_inner_l">中間的左邊8</div>
<div class="wrap_inner_m">中間的右邊9</div>
這是中間部分10
</div>
</div>
</body>
</html>