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

<!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. 初学IHttpModule的处理

    //集成IRequiresSessionState和IReadOnlySessionState是为了在类中访问session public class ModuleBase : IHttpModule ...

  2. DSOframer 的简单介绍和资源整理

    DSOframer 是微软提供一款开源的用于在线编辑 Word. Excel .PowerPoint 的 ActiveX 控件.国内很多著名的 OA 中间件,电子印章,签名留痕等大多数是依此改进而来的 ...

  3. SQL查询练习题目

    SQL查询练习题目 设有一数据库,包括四个表:学生表(Student).课程表(Course).成绩表(Score)以及教师信息表(Teacher).四个表的结构分别如表1-1的表(一)~表(四)所示 ...

  4. Java生成PDF报表

    一.前言 前几天,做ASN条码收货模块,需要实现打印下载收货报表,经一番查找,选定iText--用于生成PDF文档的一个Java类库.废话不多说,进入正题. 二.iText简介 iText是著名的开放 ...

  5. 机器学习(Machine Learning)

    从wiki开始:http://en.wikipedia.org/wiki/Machine_learning 今天看机器学习相关的文章, 了解了一下opencv中机器学习功能比较多了 (http://d ...

  6. android 转帖留链接

    Android开发:用Drawable XML绘制带阴影效果的圆形按钮          http://evis.me/2013/05/android-dev-render-button-with-s ...

  7. EventLog监控

    http://www.activexperts.com/activmonitor/windowsmanagement/adminscripts/logs/eventlogs/ http://etuto ...

  8. 三篇编译libcurl，附下载 good

    http://download.csdn.net/detail/flyliying/2982867 http://download.csdn.net/detail/wojiushiwo987/9113 ...

  9. C++实现线程池 .

    C++实现线程池. 欢迎转载,转载请注明原出处:http://blog.csdn.net/ithzhang/article/details/9020283 代码地址:https://github.co ...

  10. aix rksh 执行CLI命令行限制

    su padmin -C "lsdev -dev hdisk9 -attr| grep unique_id"rksh: lsdev: 0403-006 Execute permis ...