CSS 布局总结——变宽度布局
浏览数：19 /
时间：2015年06月09日
变宽度布局
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;
}郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
