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

2022-09-16 14:08:06

变宽度布局

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 布局总结——变宽度布局,布布扣,bubuko.com

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

码农公寓

变宽度布局

1-2-1 等比例变宽

1-2-1 单列变宽

1-3-1 单側列宽固定

1-3-1 中间列宽固定

1-3-1 双側列宽固定

1-3-1 中列和側列宽固定

相关文章