关于自适应布局有很多实现方法，本文通过CSS负边距来实现了一些常用的自适应布局，希望对你有所帮助。
单列定宽单列自适应布局：
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>单列定宽单列自适应布局</title> <style type="text/css"> * {margin:0;padding:0;} .cont, .side {float:left;} .cont {width:100%;} .main {margin-right:200px;background:#DDDDDD;} .side {margin-left:-200px;width:200px;background:#F7F7F7;} </style> </head> <body> <div class="cont"> <div class="main">main</div> </div> <div class="side">side</div> </body> </html>
左右定宽中间自适应布局：
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>左右定宽中间自适应布局</title> <style type="text/css"> * {margin:0;padding:0;} .cont, .side, .sub-main {float:left;} .cont {width:100%;} .main {margin-right:200px;margin-left:300px;background:#DDDDDD;} .side {margin-left:-200px;width:200px;background:#F7F7F7;} .sub-main {margin-left:-100%;width:300px;background:#F7F7F7;} </style> </head> <body> <div class="cont"> <div class="main">main</div> </div> <div class="side">side</div> <div class="sub-main">sub-main</div> </body> </html>
两列等高自适应布局：
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>两列等高自适应布局</title> <style type="text/css"> * {margin:0;padding:0;} .layout {overflow:hidden;} .cont, .side {float:left;padding-bottom:9999px;margin-bottom:-9999px;} .cont {width:100%;} .main {margin-right:200px;background:#DDDDDD;} .side {margin-left:-200px;width:200px;background:#F7F7F7;} </style> </head> <body> <div class="layout"> <div class="cont"> <div class="main"> main <br/><br/><br/><br/><br/><br/><br/> </div> </div> <div class="side">side</div> </div> </body> </html>
以上代码来自：cssbox.net
总结扩展
现在的自适应模板大部分都是用百分比来做，还有一些是用css3的媒体查询，是用上述的负边距不算是真正的自适应布局，例如在小屏幕访问的时候依然是超出间距的。有些是隐藏了，看不到了。
css3的媒体查询如下：
@media screen and (max-width:1200px){
}
@media screen and (min-width:951px) and (max-width:1200px){
}
@media screen and (max-width:950px){
}
自适应布局现在在移动平板上应用得比较多。而上述的css负边距可能适合不同分辨率的网站浏览有比较好的体验。
现在也有很多用web前端框架来架构网站，例如用bootstrap、jquery ui、jquery easyui、yii等框架。
现在很多大型的项目也使用css栅格化形式来布局统一界面了。相信web前端开发这方面将会变得更规范和更容易上手。
查看我之前做的自适应演示（使用css3媒体查询）
