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 ...
随机推荐
- jQuery避免$符和其他JS库冲突的方法对比
1.如果jquery库在第三方库之后引用.这个时候jquery库会占用$. 解决办法:剔除$符号的使用权. <script type="text/javascript" sr ...
- Asp.Net Core(.net内核)
Asp.Net Core(.net内核) //----------------Day1----------------一章 Web基本原理 1节课程说明 web窗体--设计界面--加法使用Chr ...
- WebView介绍
本文主要对WebView进行介绍,包括webView 4个可以定制的点.设置WebView back键响应.控制网页的链接仍在webView中跳转.显示页面加载进度.处理https请求.利用addJa ...
- Spring 定时任务的实现<转>
本人暂时用到的实现定时任务的方式有2种 一.注解方式实现,简单方便 1:在applicationContext.xml中加入下面的配置, 这是spring的组件扫描,保证含有定时任务的类,能被spri ...
- 我喜欢的乐队-Euphoria
来自日本的后摇乐团,001年冬天由森川裕之.佐藤昭太.木下阳辅三人于东京组建,2003年签约日本独立厂牌123Record,并发行首张EP细碟<Floral Dew>.包括EP.Singl ...
- flex 图片旋转（解决公转和自转问题）
在Flex中图片的旋转是既有公转和自转的.这样在图片旋转的时候就有一定小麻烦: 为了更好地说明问题,先引入两个概念:“自转”和“公转”.想象一下,地球在绕着太阳公转的同时,它自己也在自转.Flash应 ...
- php 解决微信昵称emoji表情插入MySQL报错
在PHP接受到微信用户昵称入库的时候报错 原因:utf-8 最大3个字节,而emoji占4个字节 解决办法: 1.修改mysql 数据库的字符集,改为utf8mb4,但是前提是MySQL的版本需要5. ...
- CSS基础知识——选择器
选择器 元素选择器# 文档元素为最基本的选择器 例子:div{属性:值}; 选择器分组 例子:h2,p{属性:值}; 表示符合这两种规则的元素设置相同的属性值 通配选择器 表示所有元素 类选择器 应用 ...
- MFC 解析xml文件
CComVariant IXMLDOMElement http://blog.sina.com.cn/s/blog_69e905cd0100kp5i.html
- SQL Server 2000的并发连接数是多少
开始->管理工具->性能(或者是运行里面输入 mmc)然后通过 添加计数器添加 SQL 的常用统计(MSSQL General Statistics) 然后在下面列出的项目里面选择 用户连 ...