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

最新推荐文章于 2021-03-14 11:03:22 发布

warwolf24

最新推荐文章于 2021-03-14 11:03:22 发布

阅读量1.9k

点赞数 1

分类专栏： CSS 文章标签： CSS 固定宽度布局

本文链接：https://blog.csdn.net/warwolf24/article/details/23996785

版权

固定宽度布局

单列布局

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