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前端开发这方面将会变得更规范和更容易上手。
css负边距自适应布局的更多相关文章
- CSS 负边距自适应布局
单列定宽单列自适应布局: <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"& ...
- CSS负边距自适应布局三例
单列定宽单列自适应布局: <!DOCTYPE HTML> <html> <head> <meta charset=”UTF-8″> <title& ...
- CSS 负边距读后感
最近看到一篇讲解CSS 负边距的文章: http://segmentfault.com/a/1190000003750411?utm_source=Weibo&utm_medium=share ...
- css负边距之详解
自从1998年CSS2作为推荐以来,表格的使用渐渐退去,成为历史.正因为此,从那以后CSS布局成为了优雅代码的代名词. 对于所有设计师使用过的CSS概念,负边距作为最少讨论到的定位方式要记上一功.这就 ...
- 使用CSS实现三栏自适应布局（两边宽度固定，中间自适应）
来源:http://blog.csdn.net/cinderella_hou/article/details/52156333 所谓三列自适应布局指的是两边定宽,中间block宽度自适应.这道题在今年 ...
- CSS负边距margin的应用
原文 简书原文:https://www.jianshu.com/p/75a178e65207 相关文章 CSS负margin的影响:https://www.cnblogs.com/shcrk/p/93 ...
- css负边距之详解(子绝父相)
来源 | http://segmentfault.com 原文 | The Definitive Guide to Using Negative Margins 自从1998年CSS2作为推荐以 ...
- css 负边距 小记
水平格式化 当我们在元素上设置width的时候,影响的是内容区的宽度 但是当我们又为元素指定指定了内边距 边框 外边距 还是会增加宽度值 (IE传统盒模型 内边距 边框 会在元素的宽度内扩展 ma ...
- 浅析CSS负边距
本文主要讨论两点,1.左右负边距对元素宽度的影响:2.负边距对浮动元素的影响. 在讨论这两点前,首先要理解盒模型.文档流. 盒模型,见下图,简单明了. 文档流,将窗体自上而下分成一行行, 并在每行中按 ...
随机推荐
- C#整理6——数组的应用
数组的应用:(一).冒泡排序.1.冒泡排序是用双层循环解决.外层循环的是趟数,里层循环的是次数.2.趟数=n-1:次数=n-趟数.3.里层循环使用if比较相临的两个数的大小,进行数值交换. 作业:1. ...
- javascript——touch事件介绍与实例演示
分类: javascript2014-02-12 16:42 1742人阅读 评论(0) 收藏 举报 touch事件touchmovetouchstarttouchend 前言 诸如智能手机和平板 ...
- SWFUpload的使用及其注意事项
SWFUpload的使用: 添加Jquery swfuploaad.js handler.js文件 配置参数: upload_url:文件将要被传到的处理程序 post_params:{“”: ...
- NOPI 导出excel 通用方法
public static byte[] ExportExcel<T>(Dictionary<string, string> columnsHeader, List<T& ...
- Oracle 启用块跟踪
Oracle 启用块跟踪,语法示例如下: alter database enable block change tracking using file '/u01/app/oracle/oradata ...
- C++ Primer 读书笔记：第11章 泛型算法
第11章 泛型算法 1.概述 泛型算法依赖于迭代器,而不是依赖容器,需要指定作用的区间,即[开始,结束),表示的区间,如上所示 此外还需要元素是可比的,如果元素本身是不可比的,那么可以自己定义比较函数 ...
- Powerdesigner逆向工程从sql server数据库生成pdm (完整版)
第一步:打开"控制面板"中的"管理工具" 第二步:点击"管理工具"然后双击"数据源(odbc)" 第三步:打开之后,点击 ...
- 关于Application Cache
http://blog.csdn.net/fwwdn/article/details/8082433 http://www.cnblogs.com/blackbird/archive/2012/06/ ...
- html5的video标签支持的视频格式
- PHP不显示报错了怎么办~
php.ini里设置吧, 找到 display_errors, 设置成on, error_reporting = E_ALL