内容优先的 CSS 三列布局

最新推荐文章于 2025-08-19 08:41:01 发布

原创最新推荐文章于 2025-08-19 08:41:01 发布 · 180 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #布局

CSS/CSS3 专栏收录该内容

5 篇文章

订阅专栏

这样的布局可以确保中间内容首先被下载，也更有利于SEO

width、margin等变量的修改注意参考注释

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title></title>
    <style type="text/css">
        .root { width: 960px; margin: 0 auto; }

        .center, .left, .right { float: left; display: inline; }

        .center { width:100%;                                          background-color: #e9967a; }

        /* margin-left = .left[width], margin-right = .right[width] */
        .center .content { margin: 0 250px 0 150px; padding: 10px;  background-color: #60A179; }

        /* margin-left = .root[width] */
        .left { width: 150px; margin-left: -960px;                   background-color: blue; }

        /* margin-left = -(.right[width]) */
        .right { width: 250px; margin-left: -250px;                  background-color: orange; }

    </style>
</head>
<body>

    <div class="root">
        <div class="center">
            <div class="content">

                <p>text</p>
                <p>text</p>
                <p>text</p>
                <p>text</p>
                <p>text</p>

            </div>
        </div>

        <div class="left">
            <p>left</p>
            <p>left</p>
            <p>left</p>
        </div>

        <div class="right">
            <p>right</p>
            <p>right</p>
        </div>
    </div>

</body>
</html>