多行多栏布局

最新推荐文章于 2022-10-13 11:27:10 发布

iteye_6296

最新推荐文章于 2022-10-13 11:27:10 发布

阅读量176

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/iteye_6296/article/details/82643829

版权

CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

每一栏中的间距要依靠内部div，水平间距是由内部div左右外边距生成的，它们把这个div压缩了一下，这才使内容远离了父元素article 。

而每一栏中的垂直间距是由父元素的内边距生成的。为什么要用父元素呢？就是在父元素没有上、下边距的情况下，子元素的上下边距会折叠的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多行多栏布局</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #wrapper {
            margin: 0 auto;
            width: 960px;
            border: solid 1px;
        }

        header {
            background-color: gray;
        }

        nav {
            background-color: lightslategray;
        }

        section#feature_area article {
            width: 320px;
            float: left;
            /*对于作为栏的容器,只能添加垂直内边距*/
            padding: 10px 0;
            background-color: #fff;
            border-top: 4px solid #f7be84;
        }

        /*为所有内容盒子添加公共样式*/
        section#feature_area article .inner {
            margin: 10px 20px;
            text-indent: 20px;
            padding: 5px;
            background-color: gray;
            border: 5px solid;
        }

        /*以下三条分别为三个内容盒子设定样式*/
        section#feature_area article:nth-child(1) .inner {
            border-color: #d7dd6f;
        }

        section#feature_area article:nth-child(2) .inner {
            border-color: #f6dec5;
        }

        section#feature_area article:nth-child(3) .inner {
            border-color: #d1d8e4;
        }


        section#promo_area article {
            width: 240px;
            float: left;
            padding: 10px 0;
            background-color: #fff;
        }

        section#promo_area article .inner {
            margin: 10px 20px;
            background-color: grey;
            border: #d7dd6f solid 5px;
        }

        footer {
            clear: both;
        }
    </style>
</head>
<body>

<div id="wrapper">
    <header>
        <h1>Full-width content</h1>
    </header>

    <nav>
        <p>Navigation menus go here</p>
    </nav>

    <section id="branding">
        <img src="../images/ad.jpg">
    </section>

    <section id="feature_area">
        <article>
            <div class="inner">
                <p>HTML 字符集如需正确地显示 HTML 页面，浏览器必须知道使用何种字符集。
                    万维网早期使用的字符集是 ASCII。ASCII 支持 0-9 的数字，大写和小写英文字母表，以及一些特殊字符。</p>
            </div>
        </article>
        <article>
            <div class="inner">

                <p>HTML 字符集如需正确地显示 HTML 页面，浏览器必须知道使用何种字符集。
                    万维网早期使用的字符集是 ASCII。ASCII 支持 0-9 的数字，大写和小写英文字母表，以及一些特殊字符。</p>
            </div>
        </article>
        <article>
            <div class="inner">
                <p>HTML 字符集如需正确地显示 HTML 页面，浏览器必须知道使用何种字符集。
                    万维网早期使用的字符集是 ASCII。ASCII 支持 0-9 的数字，大写和小写英文字母表，以及一些特殊字符。</p>
            </div>
        </article>
    </section>


    <section id="promo_area">
        <article>
            <div class="inner">
                <p>Unicode 标准
                    由于上面列出的字符集都有容量限制，而且不兼容多语言环境，Unicode 联盟开发了 Unicode 标准。
                    Unicode 标准涵盖了世界上的所有字符、标点和符号。
                    不论是何种平台、程序或语言，Unicode 都能够进行文本数据的处理、存储和交换。</p>
            </div>
        </article>
        <article>
            <div class="inner">

                <p>Unicode 标准
                    由于上面列出的字符集都有容量限制，而且不兼容多语言环境，Unicode 联盟开发了 Unicode 标准。
                    Unicode 标准涵盖了世界上的所有字符、标点和符号。
                    不论是何种平台、程序或语言，Unicode 都能够进行文本数据的处理、存储和交换。</p>
            </div>
        </article>
        <article>
            <div class="inner">
                <p>Unicode 标准
                    由于上面列出的字符集都有容量限制，而且不兼容多语言环境，Unicode 联盟开发了 Unicode 标准。
                    Unicode 标准涵盖了世界上的所有字符、标点和符号。
                    不论是何种平台、程序或语言，Unicode 都能够进行文本数据的处理、存储和交换。</p>
            </div>
        </article>
        <article>
            <div class="inner">
                <p>Unicode 标准
                    由于上面列出的字符集都有容量限制，而且不兼容多语言环境，Unicode 联盟开发了 Unicode 标准。
                    Unicode 标准涵盖了世界上的所有字符、标点和符号。
                    不论是何种平台、程序或语言，Unicode 都能够进行文本数据的处理、存储和交换。</p>
            </div>
        </article>
    </section>

    <footer>
        <p>A CSS template</p>
    </footer>
</div>


</body>
</html>

iteye_6296

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
多行多栏布局

每一栏中的间距要依靠内部div，水平间距是由内部div左右外边距生成的，它们把这个div压缩了一下，这才使内容远离了父元素article 。而每一栏中的垂直间距是由父元素的内边距生成的。为什么要用父元素呢？就是在父元素没有上、下边距的情况下，子元素的上下边距会折叠的。 &lt;!DOCTYPE html&gt;&lt;html lang="en"&g...
复制链接

扫一扫