日期:2014-05-16  浏览次数:20606 次

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>