<!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>CSS布局:三行一列 - 780px固定宽，靠左</title> <script type="text/javascript"> function AddText(id){ getText = document.getElementById(id).innerHTML; document.getElementById(id).innerHTML = getText+"测试用的测试用的测试用的测试用的测试用的测试用的测试用的测试用的测试用的测试用的测试用的测试用的测试用的测试用的测试用的测试用的测试用的测试用的测试用的测试用的测试用的测试用的测试用的测试用的测试用的测试用的测试用的测试用的测试用的测试用的测试用的测试用的测试用的测试用的测试用的测试用的"; } </script> <style type="text/css"> *,html,body{margin:0;padding:0;} body{ background:#F0DFDB; font-size:14px; } h3{ font-size:18px; } p{ padding:20px; } #header{ width:780px; background:#A94E38; color:#F0DFDB;} #content{ width:780px; background:#fff } #footer{ width:780px; background:#7082C2; color:#fff } </style> </head> <body> <div id="header"> <h3>#header</h3> <p>{ width:780px; background:#A94E38; color:#F0DFDB} 高度自动,宽度780px 提示：先去掉body的初始样式,默认元素随文字靠左，所以margin保持为0就可以了 *,html,body{margin:0;padding:0;}</p> </div> <div id="content"> <h3>#content</h3> <p> #content{ width:780px; background:#fff} 只是定义了宽度为780px,背景为白色与body色加以区分 </p> <a href="javascript:AddText('content')">加点文字</a> </div> <div id="footer"> <h3>#footer</h3> <p>#footer{ width:780px; background:#7082C2; color:#fff }</p> </div> </body> </html>