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

随机推荐

HDU 5785 Interesting
题目: 大概说给一个字符串,找到其所有子串[i...k]满足它是由两个回文串拼成的,求Σi*k. 分析: 用val[1][i]表示以i结尾的回文串的起始位置的和val[0][i]表示以i起始的回文串的 ...
Android简单登录系统
很长时间没有写博客了,最近一直在写android for gis方面的项目.不过这篇博客就不写gis方面的了,今天刚刚做的一个简单的android登录系统.数据库是android自带的sqlite,s ...
SQL Server 2012 Enterprise Edition安装过程详解(包含每一步设置的含义)
一.启动安装程序,点击“安装”选项卡,选择“全新SQL Server独立安装或向现有安装添加功能”.(首次安装数据库系统或向现有数据库系统添加功能,均选择此选项) 二.随后,安装程序进行“安装程序支持 ...
04JS高级动态添加属性和删除属性
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
ajax应用篇
ajax简介 AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术.Ajax不是一种新的编程语言, ...
linux安装php5.3
安装php的依赖包 [root@localhost admin]# unzip libxml2-2.7.8.tar.zip [root@localhost admin]#tar zvxf libxml ...
PHP中实现异步调用多线程程序代码
本文章详细的介绍了关于PHP中实现异步调用多线程方法,下面我们以给1000个用户发送一封推荐邮件,用户输入或者导入邮件账号了提交服务器执行发送来讲述. 比如现在有一个场景,给1000个用户发送一封推荐 ...
hdu 2509 Be the Winner 博弈
题目链接有n堆苹果, 对于其中的每一堆的x个苹果, 它是放在一条线上的. 你每次可以对一堆苹果进行操作, 可以取y个, 1<=y<=x. 然后如果你是取的一条线上中间的苹果, 那么这一堆 ...
C99新特性
c99标准允许使用变长数组,变的意思是可以根据变量的值来指定数组的维数,如根据用户的输入值指定数组的大小,印象中以前是不可以的.现在在gcc中是可以的(PS:ansi c标准是C90标准): ==== ...
Sentinel-1雷达数据可以免费下载
The Sentinel-1 Scientific Data Hub(https://scihub.esa.int )网站提供免费下载 Sentinel-1雷达数据Level-0 和 Level-1级 ...