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

浏览数：21 / 时间：2015年06月09日

固定宽度布局

单列布局


固定宽度的单列布局中，外层指定宽度（如果没指定宽度，会自动伸展），设置 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;
			}


CSS 布局总结——固定宽度布局,古老的榕树,5-wow.com

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： css 固定宽度 布局 css 固定宽度 布局

相关文章

随机文章

您可能还喜欢

您可能还喜欢