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前端开发这方面将会变得更规范和更容易上手。

上一篇:java解答:有17个人围成一圈(编号0~16),从第0号的人开始从1报数,凡报到3的倍数的人离开圈子,然后再数下去,直到最后只剩下一个人为止,问此人原来的位置是多少号?


下一篇:再起航,我的学习笔记之JavaScript设计模式24(备忘录模式)