CSS 布局总结——固定宽度布局

固定宽度布局

单列布局


固定宽度的单列布局中，外层指定宽度（假设没指定宽度，会自己主动伸展），设置 margin: 20px auto; 实现居中就可以。

HTML结构：
<!DOCTYPE HTML>
<html>
	<head>
    	<title>单列固定宽度</title>
        <meta charset="utf-8" />        
    </head>
    
    <body>
    	<div id="header">
            <div class="warp">
                <h2>Page Header</h2>
                <div class="main">
                    <p>
                        文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>
                        文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
                    </p>
                </div>
                <div class="footer">
                    <p>footer footer footer footer footer footer footer footer</p>
                </div>
            </div>
        </div>
            
        <div id="content">
            <div class="warp">
                <h2>Page Header</h2>
                <div class="main">
                    <p>
                        文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>
                        文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
                    </p>
                </div>
                <div class="footer">
                    <p>footer footer footer footer footer footer footer footer</p>
                </div>
            </div>
        </div>
            
        <div id="pagefooter">
            <div class="warp">
                <h2>Page Header</h2>
                <div class="main">
                    <p>
                        文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>
                        文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
                    </p>
                </div>
                <div class="footer">
                    <p>footer footer footer footer footer footer footer footer</p>
                </div>
            </div>
        </div>
    </body>
</html>

CSS：
			body{
				font: 13px/1.5 Arial;
				margin: 0;
				padding: 0;
			}
			.warp{
				border: 1px solid black;
				width: 760px;
				margin: 10px auto;
			}
			.warp h2{
				background-color: #666;
				padding: 20px 20px 10px;
				margin: 0;
			}
			.warp .main{
				background-color: #999;
				padding: 10px 20px;
			}
			.warp .footer p{
				background-color: #CCC;
				color: #888;
				text-align: right;
				display: block;
				padding: 10px 20px 20px;
				margin: 0;
			}


1-2-1 布局


实现固定宽度的 1-2-1 布局有两种方式，一种是使用 absolute 定位，一种是使用 float 布局。


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>
            
        <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: 760px;
				margin: 10px auto;
			}
			#header{
				border: 1px solid black;
				background-color: #666;
			}
			#footer{
				border: 1px solid black;
				background-color: #CCC;
			}

1）使用 absolute 定位：用这样的方法仅仅须要确定当中一列的宽度，并设为 absolute: absolute; 还有一列使用margin 定位。

注意父元素设为 position:relative; 并且设为 absolute 的列必须比还有一列高度小。


			#container{
				position: relative;
			}
			#content{
				border: 1px solid black;
				background-color: #999;
				width: 500px;
				position: absolute;
				top: 0;
				left: 0;
			}
			#side{
				border: 1px solid black;
				background-color: #999;
				margin-left: 520px;
			}

2）使用float 定位：使用这样的方法两列都必须设置宽度，而且要在最后加一个空的元素  <div id="clear"></div> 
			#content{
				border: 1px solid black;
				background-color: #999;
				width: 500px;
				float: left;
			}
			#side{
				border: 1px solid black;
				background-color: #999;
				width: 250px;
				float: right;
			}
			#clear{
				clear: both;
			}

1-3-1 布局


所用方法与 1-2-1 布局一样，这里不再赘述

1-((1-2)+1)-1 布局


HTML 结构：
<!DOCTYPE HTML>
<html>
	<head>
    	<title>1-((1-2)+1)-1 固定宽度</title>
        <meta charset="utf-8" />        
    </head>
    
    <body>
    	<div id="header">
            <p>Header</p>
        </div>
            
        <div id="container">
            <div id="content">
            	<div id="contentHeader">
            		<p>Content Header</p>
                </div>
                <div id="columns">
                    <div id="column1">
                        <h2>Column1 Header</h2>
                        <div class="main">
                            <p>
                                文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>
                                文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
                            </p>
                        </div>
                    </div>
                    <div id="column2">
                        <h2>Column2 Header</h2>
                        <div class="main">
                            <p>
                                文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>
                                文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
                            </p>
                        </div>
                    </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: 760px;
				margin: 10px auto;
			}
			#header{
				border: 1px solid black;
				background-color: #666;
			}			
			#footer{
				border: 1px solid black;
				background-color: #CCC;
			}
			
			
			/*使用 float 布局*/
			#content{
				width: 500px;
				float: left;
			}
			#side{
				border: 1px solid black;
				background-color: #999;
				width: 240px;
				float: right;
			}
			#clear{
				clear: both;
			}
			#contentHeader{
				border: 1px solid black;
				background-color: #999;
			}
			#columns{
				margin: 10px 0;
			}
			#column1{
				border: 1px solid black;
				background-color: #999;
				width: 250px;
				float: left;
			}
			#column2{
				border: 1px solid black;
				background-color: #999;
				width:210px;
				float: right;
			}


posted @ 2016-02-17 12:57  zfyouxi  阅读(363)  评论(0)    收藏  举报