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

来源：互联网发布：amd优化编辑：程序博客网时间：2024/04/27 14:12

固定宽度布局

单列布局

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

1 0