DIV+CSS三行三列布局，中间自适应，完美支持主流浏览器

zuoming99

浏览: 139377 次
性别:
来自: 深圳

最近访客更多访客>>

liqita

chz5210

hedgehog12

yongjun310

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

HTML CSS DIV+CSS 布局

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Advanced CSS Layout</title>
    <style type="text/css">
        html, body { height: 100%; margin: 0; padding: 0; }
        * { margin: 0; padding: 0; }
        .c { clear: both; }

        /* 容器 */
        .page { width: 960px;/* 变量 */ margin: 0 auto; }
        .head { height: 60px;/* 变量 */ background-color: #9acd32; }
        .foot { height: 80px;/* 变量 */ background-color: #60A179; }
        .left { float: left; width: 100px;/* 变量 */ background-color: #ff69b4; }
        .right { float: right; width: 120px;/* 变量 */ background-color: #e9967a; }
        /* not IE6 */
        .center { padding-left: 100px;/* 变量(同.left[width]) */ padding-right: 120px;/* 变量(同.right[width]) */ }
        /* IE 6 hack*/
        .center { _display:inline; _zoom:1; _margin-left:-3px; _margin-right:-3px; _padding-left: 0; _padding-right: 0; }
        .main { background-color: #fffacd; width: 100%;}
    </style>
</head>
<body>

    <div class="page">
        <div class="head">head</div>
        <div class="middle">
            <div class="left">
                <p>left</p>
                <p>left</p>
                <p>left</p>
            </div>
            <div class="right">
                <p>right</p>
                <p>right</p>
                <p>right</p>
                <p>right</p>
            </div>
            <div class="center">
                <div class="main">

                    <p>这里可以放任何物体</p>
                    <p>这里可以放任何物体</p>
                    <p>这里可以放任何物体</p>
                    <p>这里可以放任何物体</p>
                    <p>这里可以放任何物体</p>
                    <p>这里可以放任何物体</p>
                    <p>这里可以放任何物体</p>
                    <p>这里可以放任何物体</p>

                </div>
            </div>
            <div class="c"></div>
        </div>
        <div class="foot">foot</div>
    </div>

</body>
</html>