单列定宽单列自适应布局：

<!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负边距自适应布局的更多相关文章

  1. CSS 负边距自适应布局

    单列定宽单列自适应布局: <!DOCTYPE HTML> <html> <head>     <meta charset="UTF-8"& ...

  2. CSS负边距自适应布局三例

    单列定宽单列自适应布局: <!DOCTYPE HTML> <html> <head> <meta charset=”UTF-8″> <title& ...

  3. CSS 负边距读后感

    最近看到一篇讲解CSS 负边距的文章: http://segmentfault.com/a/1190000003750411?utm_source=Weibo&utm_medium=share ...

  4. css负边距之详解

    自从1998年CSS2作为推荐以来,表格的使用渐渐退去,成为历史.正因为此,从那以后CSS布局成为了优雅代码的代名词. 对于所有设计师使用过的CSS概念,负边距作为最少讨论到的定位方式要记上一功.这就 ...

  5. 使用CSS实现三栏自适应布局（两边宽度固定，中间自适应）

    来源:http://blog.csdn.net/cinderella_hou/article/details/52156333 所谓三列自适应布局指的是两边定宽,中间block宽度自适应.这道题在今年 ...

  6. CSS负边距margin的应用

    原文 简书原文:https://www.jianshu.com/p/75a178e65207 相关文章 CSS负margin的影响:https://www.cnblogs.com/shcrk/p/93 ...

  7. css负边距之详解(子绝父相)

    来源 | http://segmentfault.com 原文 |  The Definitive Guide to Using Negative Margins   自从1998年CSS2作为推荐以 ...

  8. css 负边距 小记

    水平格式化 当我们在元素上设置width的时候,影响的是内容区的宽度  但是当我们又为元素指定指定了内边距 边框 外边距 还是会增加宽度值  (IE传统盒模型 内边距 边框 会在元素的宽度内扩展 ma ...

  9. 浅析CSS负边距

    本文主要讨论两点,1.左右负边距对元素宽度的影响:2.负边距对浮动元素的影响. 在讨论这两点前,首先要理解盒模型.文档流. 盒模型,见下图,简单明了. 文档流,将窗体自上而下分成一行行, 并在每行中按 ...

随机推荐

  1. Slf4j的包冲突

    异常信息:Caused by: java.lang.NoClassDefFoundError: Could not initialize class org.apache.log4j.Log4jLog ...

  2. HTML需掌握的基础

    首先,我们学习web前端开发基础技术需要掌握的是HTML.CSS.JavaScript语言,那么在下先解释一下何为HTML.CSS.JavaScript语言. HTML是网页内容的载体.内容就是网页制 ...

  3. 推荐书目 - C++学习资料

    前言 在本文的前半部分我我会谈谈 我看过的书,和我个人的一些理解 ,并且会提供 C++标准委员会相关链接 和 C++第三方轮子/库总结 .本文的后半部分翻译了来自 The Definitive C++ ...

  4. C# 数组的应用

    //数组的应用: //(一).冒泡排序. //1.冒泡排序是用双层循环解决.外层循环的是趟数,里层循环的是次数. //2.趟数=n-1:次数=n-趟数. //3.里层循环使用if比较相临的两个数的大小 ...

  5. 生成HFile文件后倒入数据出现Caused by: java.lang.ClassNotFoundException: org.apache.hadoop.hbase.filter.Filter

    数据导入的时候出现: at java.lang.Class.getDeclaredMethods0(Native Method) at java.lang.Class.privateGetDeclar ...

  6. WdatePicker日历控件使用方法

    1. 跨无限级框架显示 无论你把日期控件放在哪里,你都不需要担心会被外层的iframe所遮挡进而影响客户体验,因为My97日期控件是可以跨无限级框架显示的 示例2-7 跨无限级框架演示 可无限跨越框架 ...

  7. android-Java SoftReference，WeakReference，Direct Reference简介

    主要部分: SoftReference(软引用)是java中一个用来实现缓存内容的类.通过此类,可以观察某对象什么时候会被垃圾收集的执行绪清除.被 Soft Reference 指到的对象,即使没有任 ...

  8. 元素“Button”不是已知元素。原因可能是网站中存在编译错误，或者缺少web.config文件

    最近开发的时候ASP控件都有波浪下划线,提示不是已知元素,搞得挺郁闷的.虽然不影响变异,不过就是不爽. 折腾N久...... 解决了,把FramWork平台换成3.5,问题解决,不知道为啥,求大神指点 ...

  9. jdk1.6,jdk1.7共存

    当然可以,安装的时候记得选择不同的安装目录,安装好以后,可以在开发工具(如eclipse)中切换不同的编译环境和运行环境.其实只要安装eclipse就自带了jdk1.3-1.6的编译环境了. Mac下 ...

  10. 前端js模板库 JinkoTemplate

    有时候需要使用ajax来异步生成html,最土的方法就是用js的‘+’连接html代码,生成繁琐.一旦需要修改,对于少量的html代码到没啥问题,要是比较复杂的样式时,就真坑爹了,眼花缭乱有木有?Ji ...