zoukankan html css js c++ java

CSS 布局总结——变宽度布局

变宽度布局

1-2-1 等比例变宽

总宽度设置 85%; min- 650px; （关于IE6的min-width支持，可用）

content 设置 66%; float: left;

side 设置 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{
				 85%;
				margin: 10px auto;
				min- 650px;
			}
			#header{
				border: 1px solid black;
				background-color: #666;
			}
			#content{
				border: 1px solid black;
				background-color: #999;
				 66%;
				float: left;
			}
			#side{
				border: 1px solid black;
				background-color: #999;
				 33%;
				float: right;
			}
			#clear{
				clear: both;
			}
			
			#footer{
				border: 1px solid black;
				background-color: #CCC;
			}

1-2-1 单列变宽

side 固定宽度，content 随窗体宽度变化

side设置 200px; float: left;

在content外层增加 contentWrap，contentWrap 设置为 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{
				 85%;
				margin: 10px auto;
				min- 700px;
			}
			#header{
				border: 1px solid black;
				background-color: #666;
			}
			#contentWrap{
				 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;
				 200px;
				float: left;
			}
			#clear{
				clear: both;
			}
			#footer{
				border: 1px solid black;
				background-color: #CCC;
			}

1-3-1 单側列宽固定

nav 固定宽度 200px; float: left;

在content 和 side 外层增加两层 div：outerWrap 和 innerWrap

outerWrap 设置为 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{
				 85%;
				margin: 10px auto;
				min- 800px;
			}
			#header{
				border: 1px solid black;
				background-color: #666;
			}
			#nav{
				border: 1px solid black;
				background-color: #999;
				 200px;
				float: left;
			}
			#outerWrap{
				 100%;
				margin-right: -210px;
				float: right;
			}
			#innerWrap{
				margin-right: 210px;
			}
			#content{
				border: 1px solid black;
				background-color: #999;
				 66%;
				float: left;
			}
			#side{
				border: 1px solid black;
				background-color: #999;
				 33%;
				float: right;
			}
			#clear{
				clear: both;
			}
			
			#footer{
				border: 1px solid black;
				background-color: #CCC;
			}

1-3-1 中间列宽固定

content 宽度固定

在 nav 和 side 分别加上外层 div ：navWrap 和 sideWrap

navWrap 设置为 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{
				 85%;
				margin: 10px auto;
				min- 700px;
			}
			#header{
				border: 1px solid black;
				background-color: #666;
			}
			#navWrap{
				 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;
				 400px;
				float: left;
				margin-left: 10px;
			}
			#sideWrap{
				 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 设置为 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{
				 85%;
				margin: 10px auto;
				min- 800px;
			}
			#header{
				border: 1px solid black;
				background-color: #666;
			}
			#nav{
				border: 1px solid black;
				background-color: #999;
				 200px;
				float: left;
			}
			#outerWrap{
				 100%;
				margin-right: -210px;
				float: right;
			}
			#innerWrap{
				margin-right: 210px;
			}
			#contentWrap{
				 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;
				 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{
				 85%;
				margin: 10px auto;
				min- 800px;
			}
			#header{
				border: 1px solid black;
				background-color: #666;
			}
			#nav{
				border: 1px solid black;
				background-color: #999;
				 200px;
				float: left;
			}
			#content{
				border: 1px solid black;
				background-color: #999;
				margin-left: 10px;
				 400px;
				float: left;
			}
			#sideWrap{
				 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;
			}

查看全文

相关阅读:
jquery笔记
 css选择器
 Linq 巧用 Max,Sum
Linq Aggregate
Linq 对象的比较 Contains,Max
Linq SelectMany 交叉连接
 JQ 标签相关知识
 C# HttpClient设置cookies的两种办法 (转发)
使用 HttpClient 请求 Web Api
MySQL 避免重复数据的批量插入与批量更新

原文地址：https://www.cnblogs.com/mengfanrong/p/3766450.html