CSS 布局总结——变宽度布局
变宽度布局
1-2-1 等比例变宽
总宽度设置 width: 85%; min-width: 650px; （关于IE6的min-width支持，可用）
content 设置 width: 66%; float: left;
side 设置 width: 33%; float: right;
增加clear 空div
HTML 结构：
<!DOCTYPE HTML>
<html>
<head>
<title>1-2-1 等比例变宽</title>
<meta charset="utf-8" />
</head> <body>
<div id="header">
<p>Header</p>
</div> <div id="container">
<div id="content">
<h2>Content Header</h2>
<div class="main">
<p>
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
</p>
</div>
</div>
<div id="side">
<h2>Side Header</h2>
<div class="main">
<p>
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
</p>
</div>
</div>
<div id="clear"></div>
</div> <div id="footer">
<p>footer footer footer footer footer footer footer footer</p>
</div>
</body>
</html>
CSS：
body{
font: 13px/1.5 Arial;
margin: 0;
padding: 0;
}
#header, #container, #footer{
width: 85%;
margin: 10px auto;
min-width: 650px;
}
#header{
border: 1px solid black;
background-color: #666;
}
#content{
border: 1px solid black;
background-color: #999;
width: 66%;
float: left;
}
#side{
border: 1px solid black;
background-color: #999;
width: 33%;
float: right;
}
#clear{
clear: both;
}
#footer{
border: 1px solid black;
background-color: #CCC;
}
1-2-1 单列变宽
side 固定宽度，content 随窗体宽度变化
side设置 width: 200px; float: left;
在content外层增加 contentWrap，contentWrap 设置为 width: 100%; margin-right: -220px; float: right;
而content 设置为 margin-right: 220px;
这样就利用了wrap实现了content的宽度为 100%-320px
HTML 结构：
<!DOCTYPE HTML>
<html>
<head>
<title>1-2-1 单列变宽</title>
<meta charset="utf-8" />
</head> <body>
<div id="header">
<p>Header</p>
</div> <div id="container">
<div id="contentWrap">
<div id="content">
<h2>Content Header</h2>
<div class="main">
<p>
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
</p>
</div>
</div>
</div> <div id="side">
<h2>Side Header</h2>
<div class="main">
<p>
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
</p>
</div>
</div>
<div id="clear"></div>
</div> <div id="footer">
<p>footer footer footer footer footer footer footer footer</p>
</div>
</body>
</html>
CSS：
body{
font: 13px/1.5 Arial;
margin: 0;
padding: 0;
}
#header, #container, #footer{
width: 85%;
margin: 10px auto;
min-width: 700px;
}
#header{
border: 1px solid black;
background-color: #666;
}
#contentWrap{
width: 100%;
margin-right: -220px;
float: right;
}
#content{
border: 1px solid black;
background-color: #999;
margin-right: 220px;
}
#side{
border: 1px solid black;
background-color: #999;
width: 200px;
float: left;
}
#clear{
clear: both;
}
#footer{
border: 1px solid black;
background-color: #CCC;
}
1-3-1 单側列宽固定
nav 固定宽度 width: 200px; float: left;
在content 和 side 外层增加两层 div：outerWrap 和 innerWrap
outerWrap 设置为 width: 100%; margin-right: -210px; float: right;
innerWrap 设置为 margin-right: 210px;
然后content 和 side 相当于在 innerWrap 内部等比例变宽
HTML结构：
<!DOCTYPE HTML>
<html>
<head>
<title>1-3-1 单側列宽固定</title>
<meta charset="utf-8" />
</head> <body>
<div id="header">
<p>Header</p>
</div> <div id="container">
<div id="nav">
<h2>Nav Header</h2>
<div class="main">
<p>
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
</p>
</div>
</div> <div id="outerWrap">
<div id="innerWrap">
<div id="content">
<h2>Content Header</h2>
<div class="main">
<p>
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
</p>
</div>
</div>
<div id="side">
<h2>Side Header</h2>
<div class="main">
<p>
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
</p>
</div>
</div>
</div>
</div>
<div id="clear"></div>
</div> <div id="footer">
<p>footer footer footer footer footer footer footer footer</p>
</div>
</body>
</html>
CSS：
body{
font: 13px/1.5 Arial;
margin: 0;
padding: 0;
}
#header, #container, #footer{
width: 85%;
margin: 10px auto;
min-width: 800px;
}
#header{
border: 1px solid black;
background-color: #666;
}
#nav{
border: 1px solid black;
background-color: #999;
width: 200px;
float: left;
}
#outerWrap{
width: 100%;
margin-right: -210px;
float: right;
}
#innerWrap{
margin-right: 210px;
}
#content{
border: 1px solid black;
background-color: #999;
width: 66%;
float: left;
}
#side{
border: 1px solid black;
background-color: #999;
width: 33%;
float: right;
}
#clear{
clear: both;
}
#footer{
border: 1px solid black;
background-color: #CCC;
}
1-3-1 中间列宽固定
content 宽度固定
在 nav 和 side 分别加上外层 div ：navWrap 和 sideWrap
navWrap 设置为 width: 50%; margin-left: -210px; float: left;
nav 设置为 margin-left: 210px;
同理，sideWrap 和 side 也做类似的设置
HTML结构：
<!DOCTYPE HTML>
<html>
<head>
<title>1-3-1 中间列宽固定</title>
<meta charset="utf-8" />
</head> <body>
<div id="header">
<p>Header</p>
</div> <div id="container">
<div id="navWrap">
<div id="nav">
<h2>Nav Header</h2>
<div class="main">
<p>
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
</p>
</div>
</div>
</div> <div id="content">
<h2>Content Header</h2>
<div class="main">
<p>
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
</p>
</div>
</div> <div id="sideWrap">
<div id="side">
<h2>Side Header</h2>
<div class="main">
<p>
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
</p>
</div>
</div>
</div> <div id="clear"></div>
</div> <div id="footer">
<p>footer footer footer footer footer footer footer footer</p>
</div>
</body>
</html>
CSS：
body{
font: 13px/1.5 Arial;
margin: 0;
padding: 0;
}
#header, #container, #footer{
width: 85%;
margin: 10px auto;
min-width: 700px;
}
#header{
border: 1px solid black;
background-color: #666;
}
#navWrap{
width: 50%;
margin-left: -210px;
float: left;
}
#nav{
border: 1px solid black;
background-color: #999;
margin-left: 210px;
}
#content{
border: 1px solid black;
background-color: #999;
width: 400px;
float: left;
margin-left: 10px;
}
#sideWrap{
width: 49.9%;
margin-right: -210px;
float: right;
}
#side{
border: 1px solid black;
background-color: #999;
margin-right: 210px;
}
#clear{
clear: both;
}
#footer{
border: 1px solid black;
background-color: #CCC;
}
1-3-1 双側列宽固定
nav 和 side 宽度固定
nav 设置为 width: 200px; float: left;
在 content 和 side 外层加上 outerWrap 和 innerWrap ，这样就相当于单列固定宽度的设置，nav 固定宽度
然后再在 content 外层加上 contentWrap ，也相当于在 innerWrap 内部单列固定宽度设置，side 固定宽度
HTML 结构：
<!DOCTYPE HTML>
<html>
<head>
<title>1-3-1 双側列宽固定</title>
<meta charset="utf-8" />
</head> <body>
<div id="header">
<p>Header</p>
</div> <div id="container">
<div id="nav">
<h2>Nav Header</h2>
<div class="main">
<p>
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
</p>
</div>
</div> <div id="outerWrap">
<div id="innerWrap">
<div id="contentWrap">
<div id="content">
<h2>Content Header</h2>
<div class="main">
<p>
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
</p>
</div>
</div>
</div> <div id="side">
<h2>Side Header</h2>
<div class="main">
<p>
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
</p>
</div>
</div>
</div>
</div>
<div id="clear"></div>
</div> <div id="footer">
<p>footer footer footer footer footer footer footer footer</p>
</div>
</body>
</html>
CSS：
body{
font: 13px/1.5 Arial;
margin: 0;
padding: 0;
}
#header, #container, #footer{
width: 85%;
margin: 10px auto;
min-width: 800px;
}
#header{
border: 1px solid black;
background-color: #666;
}
#nav{
border: 1px solid black;
background-color: #999;
width: 200px;
float: left;
}
#outerWrap{
width: 100%;
margin-right: -210px;
float: right;
}
#innerWrap{
margin-right: 210px;
}
#contentWrap{
width: 100%;
margin-left: -110px;
float: left;
}
#content{
border: 1px solid black;
background-color: #999;
margin-left: 110px;
}
#side{
border: 1px solid black;
background-color: #999;
width: 100px;
float: right;
}
#clear{
clear: both;
}
#footer{
border: 1px solid black;
background-color: #CCC;
}
1-3-1 中列和側列宽固定
nav 和 content 固定宽度，side 外层加上 sideWrap ，相当于1-2-1单列变宽
HTML 结构：
<!DOCTYPE HTML>
<html>
<head>
<title>1-3-1 中列和側列宽固定</title>
<meta charset="utf-8" />
</head> <body>
<div id="header">
<p>Header</p>
</div> <div id="container"> <div id="nav">
<h2>Nav Header</h2>
<div class="main">
<p>
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
</p>
</div>
</div> <div id="content">
<h2>Content Header</h2>
<div class="main">
<p>
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
</p>
</div>
</div> <div id="sideWrap">
<div id="side">
<h2>Side Header</h2>
<div class="main">
<p>
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
</p>
</div>
</div>
</div>
<div id="clear"></div>
</div> <div id="footer">
<p>footer footer footer footer footer footer footer footer</p>
</div>
</body>
</html>
CSS：
body{
font: 13px/1.5 Arial;
margin: 0;
padding: 0;
}
#header, #container, #footer{
width: 85%;
margin: 10px auto;
min-width: 800px;
}
#header{
border: 1px solid black;
background-color: #666;
}
#nav{
border: 1px solid black;
background-color: #999;
width: 200px;
float: left;
}
#content{
border: 1px solid black;
background-color: #999;
margin-left: 10px;
width: 400px;
float: left;
}
#sideWrap{
width: 100%;
margin-right: -620px;
float: right;
}
#side{
border: 1px solid black;
background-color: #999;
margin-right: 620px;
}
#clear{
clear: both;
}
#footer{
border: 1px solid black;
background-color: #CCC;
}
CSS 布局总结——变宽度布局的更多相关文章
- CSS设置表格TD宽度布局
使用表格布局时,对单元格的宽度控制很伤脑筋,所以查阅资料整理如下: 一.表格布局table-layout 语法: table-layout : auto | fixed 取值: auto : 大多数 ...
- css两列自适应宽度布局（左定宽，右自适应）
1.利用BFC: <div id="root"> <div class="left">左</div> <div cla ...
- RelativeLayout中的格局，自适应宽度布局
RelativeLayout中的布局,自适应宽度布局 该图片中为android布局:总布局为 RelativeLayoutAtLeft 为居左 <TextView android:backgro ...
- css判断不同分辨率显示不同宽度布局实现自适应宽度
一.CSS DIV网页布局中当分辨率小于等于1024px(像素)时,DIV布局对象显示1000px宽度,当分辨率大于1024px时候显示1200px宽度等需求.使用CSS实现改变浏览器显示宽度从而实现 ...
- web前端学习笔记(CSS变化宽度布局)
一.“1-2-1”单列变宽布局: 对于变宽度的布局,首先要使内容的整体宽度随浏览器窗口宽度的变化而变化.因此中间的container容器中的左右两列的总宽度也会变化,这样就会产生不同的情况.这两列是按 ...
- CSS判断不同分辨率显示不同宽度布局CSS3技术支持IE6到IE8
CSS判断不同分辨率浏览器(显示屏幕)显示不同宽度布局CSS3技术支持IE6到IE8.将用到css3 @media样式进行判断,但IE9以下版本不支持CSS3技术,这里DIVCSS5给大家介绍通过JS ...
- 从三栏自适应宽度布局到css布局的讨论
如何实现一个三栏自适应布局,左右各100px,中间随着浏览器宽度自适应? 第一个想到的是使用table布局,设置table的宽度为100%,三个td,第1个和第3个固定宽度为100px,那么中间那个就 ...
- css实现div两列布局——左侧宽度固定，右侧宽度自适应（两种方法）
原文:css实现div两列布局--左侧宽度固定,右侧宽度自适应(两种方法) 1.应用场景 左侧一个导航栏宽度固定,右侧内容根据用户浏览器窗口宽度进行自适应 2.思路 首先把这个问题分步解决,需要攻克以 ...
- CSS布局——左定宽度右自适应宽度并且等高布局
方法一: 别的不多说,直接上代码,或者参考在线DEMO,下面所有的DEMO都有HTML和CSS代码,感兴趣的同学自己慢慢看吧. HTML Markup <div id="contain ...
随机推荐
- ffmpeg开发指南
FFmpeg是一个集录制.转换.音/视频编码解码功能为一体的完整的开源解决方案.FFmpeg的开发是基于Linux操作系统,但是可以在大多数操作系统中编译和使用.FFmpeg支持MPEG.DivX.M ...
- SharePoint 2013让页面显示错误
转:http://blog.csdn.net/zmoneyz/article/details/20460263 1. 在网站端口下,如80端口下的Web.config修改 (1)将<custom ...
- MyGeneration 数据库驱动为空
重做系统后安装了MyGeneration 但是安装完成后发现驱动中没有驱动信息,查了下网上的解决方案发下下面的可以完美解决,特作备忘: The problem is because of multi ...
- HDU5790 Prefix 字典树+主席树
分析:这个题和spoj的d_query是一个题,那个是求一段区间里有多少个不同的数字,这里是统计有多少个不同的前缀 用字典树进行判重,(和查询不同的数字一样)对于每个不同的前缀,只保留它最后一次出现的 ...
- 将iOS中Safari 的默认搜索引擎由google.cn改为google.com的方法
众所周知虽然Google大部分的业务已经迁出中国大陆,访问Google的中国站点只会出现一个投影网站,但是很长一段时间里如果想要访问Google仍然能跳转到google.com.hk这个香港的节点,这 ...
- mybatis系列-08-动态sql
8.1 什么是动态sql mybatis核心 对sql语句进行灵活操作,通过表达式进行判断,对sql进行灵活拼接.组装. 8.2 需求 用户信息综合查询列表和用户信息查询列表总数这两个 ...
- ACM1995
/* 汉诺塔V Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Sub ...
- Hbase 基本命令
启动Hbase:./start-hbase.sh 进入Hbase shell控制台:./hbase shell 查看所有表 list 查看数据库状态:status 查看数据库版本:vers ...
- Signs of a poorly written jQuery plugin 翻译 (Jquery插件开发注意事项，Jquey官方推荐)
原文链接:http://remysharp.com/2010/06/03/signs-of-a-poorly-written-jquery-plugin/ 原文作者:remy sharp So far ...
- elisp语法
http://stackoverflow.com/questions/3855862/setq-and-defvar-in-lisp defvar, let, setq的语法分析: defvar in ...