经常布局网页，什么情况都会碰到，比如这多个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>