首页 > 代码库 > CSS 布局总结——变宽度布局
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;
}
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。