关于自适应布局的处理利用浮动和margin负边距实现
来源：互联网 发布：知乎电子书是什么意思 编辑：程序博客网 时间：2024/04/29 18:51
·HTML5 与 XHTML2
·HTML5 语义化结构化规范化
·改进网站设计提供的有意的建议
·HTML5中语义化 b 和 i 标签
·通过优化网页页面降低对内存及CPU的占用
关键词:关于自适应布局的处理(利用浮动和margin负边距实现)
自适应布局在实际应用中越来越普遍了，今天分享几个自适应布局的demo，主要是浮动圣杯布局（也叫双飞翼布局，主要是利用浮动和margin负边距实现的），没有介绍绝对定位布局，都是我想，你能明白我下面的几个例子，绝对定位布局也是非常的简单了。
PS：圣杯布局有个好处，符合前端开发中渐进增强的理念，因为浏览器解析是从DOM的上至下，圣杯布局能够把页面中重要的内容section放到DOM前面先解析，而次要的aside内容则放在DOM后面后解析。
下面的例子能够解决实际应用中绝大多数的自适应布局问题了，有兴趣的童鞋可以研究下，代码如下：
1.左边固定，右边自适应(圣杯布局的实现)：
复制代码
代码如下:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style type="text/css">
body{margin:0;padding:0}
.wrap{ width:100%; float:left}
.content{ height:300px;background:green; margin-left:200px}
.right{ width:200px; height:300px; background:red; float:left; margin-left:-100%}
</style>
</head>
<body>
<div class="wrap">
<div class="content">content</div>
</div>
<div class="right">aside</div>
</body>
</html>
2.右边固定，左边自适应(圣杯布局的实现)：
复制代码
代码如下:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style type="text/css">
body{margin:0;padding:0}
.wrap{ width:100%; float:left}
.content{ height:300p广州中维财税 http://101.1.28.14/ x;background:green; margin-right:200px}
.right{ width:200px; height:300px; background:red; float:left; margin-left:-200px;}
</style>
</head>
<body>
<div class="wrap">
<div class="content">content</div>
</div>
<div class="right">aside</div>
</body>
</html>
3.左边和右边固定，中间自适应：
复制代码
代码如下:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style type="text/css">
body{margin:0;padding:0}
.wrap{ width:100%; float:left}
.content{ height:300px;backgr上海凯迪财税http://101.1.20.46/ ound:green; margin-left:200px;margin-right:200px}
.left{ width:200px; height:300px; float:left; background:yellow; margin-left:-100%}
.right{ width:200px; height:300px; background:red; float:left; margin-left:-200px}
</style>
</head>
<body>
<div class="wrap">
<div class="content">content</div>
</div>
<div class="left">aside</div>
<div class="right">aside</div>
</body>
</html>
- 关于自适应布局的处理利用浮动和margin负边距实现
- 关于自适应布局的处理
- margin+float实现自适应二等分布局
- 浮动布局之------margin
- 关于利用css 实现右侧固定 左侧自适应布局的解决方案
- CSS利用负margin左边固定右边自适应布局
- IE6关于浮动、margin-bottom的兼容问题
- 负边距(negative margin)实现自适应的div左右排版
- 如何利用CSS+DIV 实现三列自适应高和宽的布局（不用javascript）
- 双飞翼布局----利用float和margin实现双飞翼布局
- 实现图片和绝对布局的自适应
- 浮动布局——margin & 闭合浮动
- margin负值实现左右固定中间自适应布局
- 利用@media screen实现网页布局的自适应
- 利用@media screen实现网页布局的自适应
- 利用@media screen实现网页布局的自适应
- 利用@media screen实现网页布局的自适应
- CSS3 利用@media screen实现网页布局的自适应
- java经典问题（2）
- C++难点—类 （01）
- SVN在Android Studio中的配置
- Android屏幕适配全攻略(最权威的官方适配指导)
- java ftp
- 关于自适应布局的处理利用浮动和margin负边距实现
- Uva - 1584 - Circular Sequence
- 分数类的实现
- org.hibernate.LazyInitializationException:could not initialize proxy
- EHcache配置说明
- Android-Button
- 排序
- 本博客不再更新，移步blog.newboo.org
- n个布尔变量，打印所有可能的真值组合
