長話短說，用 DIV + CSS 做液態佈局（寬度自適應），具體用到“負值外補丁”的方法 （negative margins）。
下面我們來做一個三欄液態佈局（three-column liquid layout）
首先 Body 和 外框 的代碼：
body{margin:0;padding:0px;text-align:center;}
#wrap{margin:0 auto;text-align:left;}
#wrap{margin:0 auto;text-align:left;}
三欄的代碼分別如下：
/*左邊欄，固定寬度*/
.wrap_l{float:left;background:#FF0000;margin-right:-150px;width:150px;border:1px solid #333;}
/*中間欄，自適應寬度*/
.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_l{float:left;background:#FF0000;margin-right:-150px;width:150px;border:1px solid #333;}
/*中間欄，自適應寬度*/
.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;}
到這裏，框架已經完成，以下是完整代碼：
HTML代碼<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="author" content="Wayhome Wang" />
<meta name="Copyright" content="Copyright (C) 2003-2005 www.Abloxo.com All Rights Reserved." />
<meta name="description" content="Wayhome Wang icon, ui, website, wallpaper, design" />
<title>[示例] div + css 創建自適應寬度佈局（液態佈局）- Abloxo.com | Oeye.cn</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;}
/*中間欄，自適應寬度*/
.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">
這是左邊部分<br />
這是左邊部分<br />
這是左邊部分
</div>
<div class="wrap_r">
這是右邊部分<br />
這是右邊部分<br />
這是右邊部分
</div>
<div class="wrap_m">
這是中間部分
<div class="wrap_inner_l">中間的左邊</div>
<div class="wrap_inner_m">中間的右邊</div>
這是中間部分
</div>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="author" content="Wayhome Wang" />
<meta name="Copyright" content="Copyright (C) 2003-2005 www.Abloxo.com All Rights Reserved." />
<meta name="description" content="Wayhome Wang icon, ui, website, wallpaper, design" />
<title>[示例] div + css 創建自適應寬度佈局（液態佈局）- Abloxo.com | Oeye.cn</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;}
/*中間欄，自適應寬度*/
.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">
這是左邊部分<br />
這是左邊部分<br />
這是左邊部分
</div>
<div class="wrap_r">
這是右邊部分<br />
這是右邊部分<br />
這是右邊部分
</div>
<div class="wrap_m">
這是中間部分
<div class="wrap_inner_l">中間的左邊</div>
<div class="wrap_inner_m">中間的右邊</div>
這是中間部分
</div>
</div>
</body>
</html>