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.负边距对浮动元素的影响. 在讨论这两点前,首先要理解盒模型.文档流. 盒模型,见下图,简单明了. 文档流,将窗体自上而下分成一行行, 并在每行中按 ...

随机推荐

vs2010安装svn插件
vs2010安装svn插件及简单使用 1.下载安装程序,安装 2.配置vs2010 3.check out工程 1.下载安装程序,安装 2.配置vs2010 3.check out工程 Open th ...
(转)12款开源JavaScript库
JavaScipt几乎是所有前端开发人员必会的编程语言,并且,随着各种移动APP的串红,JavaScript还可以用来开发移动应用.除此以外,为了丰富前端/移动开发,有不少开发者推出了各种基于Java ...
超级强大的SVG SMIL animation动画详解
本文花费精力惊人,具有先驱前瞻性,转载规则以及申明见文末,当心予以追究.本文地址:http://www.zhangxinxu.com/wordpress/?p=4333 //zxx: 本文的SVG在有 ...
Intent组件
Android页面之间的跳转可以分为几类,比如有A和B两个页面,从A页面直接跳转到B页面,这样的跳转比较简单,或者从A页面跳转到B页面但是需要传送数据.在Android中,页面的跳转离不开Intent ...
Android自定义UI的实现和应用
在Android项目开发中,不可避免的要遇到自定义的UI,用较好的体验去讨好UED妹子和交互设计师手下留情~几个迭代下来,遇到了不少这样的要求,有简单有复杂.最好的实现方案就是讲业务和UI隔离,封装成 ...
python基础之 Python os._exit() sys.exit() exit()区别
Python退出程序的方式有两种:os._exit(), sys.exit() 1)os._exit() 直接退出 Python程序,其后的代码也不会继续执行. 2)sys.exit() 引发一个 S ...
Ubuntu package offline install
apt-get Use apt-get with the "--print-uris" option to do it. I also add "-qq" so ...
smarty 判断变量是否为空
{if $val.title!=""} 这里填写想要输出的内容即可 {/if}
laravel中间件源码分析
laravel中间件源码分析在laravel5.2中,HTTP 中间件为过滤访问你的应用的 HTTP 请求提供了一个方便的机制.在处理逻辑之前,会通过中间件,且只有通过了中间件才会继续执行逻辑代码. ...
OTG中的ID脚风波释疑
1. 概要 OTG设备使用插头中的ID引脚来区分A/B Device,ID接地被称作为A-Device,充当USB Host,A-Device始终为总线提供电力,ID悬空被称作为B-Device,充当 ...