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

最新推荐文章于 2023-03-25 17:26:45 发布

有钱斯基

最新推荐文章于 2023-03-25 17:26:45 发布

阅读量1.2k

点赞数 1

分类专栏： Web 文章标签： HTML CSS DIV+CSS 布局

本文链接：https://blog.csdn.net/zuoming99/article/details/84351996

版权

Web 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!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>

有钱斯基

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
DIV+CSS三行三列布局，中间自适应，完美支持主流浏览器

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"/&gt; &lt;title&gt;Advanced CSS Layout&lt;/title&gt;
复制链接

扫一扫