CSS_文字排版4

文字排版4

HTML

Code

<div class="wrap">
    <div class="container">
        <h1>CSS COKE IS AWESOME</h1>
        <div class="content">
            <p>
                Lorem ipsum, dolor sit amet consectetur adipisicing
                elit. Veniam quasi, qui odio tempore, voluptates id
                reprehenderit consequatur eius dolorum accusamus
                voluptatem modi, suscipit ea. Quidem vero nisi
                accusantium cumque enim!
            </p>
            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit.
                A iure reprehenderit hic recusandae facilis aliquam
                exercitationem labore odit doloremque voluptate, sit
                aliquid illo assumenda ipsa repudiandae aut eaque
                aspernatur soluta.
            </p>
            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit.
                Eos praesentium saepe eaque repellat labore rem totam
                iusto ab, ipsum sint quaerat laborum! Sequi sed
                voluptatibus nemo explicabo corporis ipsa voluptates.
            </p>
        </div>
    </div>
</div>

CSS

使用 column-count: 2、column-gap: 460px 將文字分成兩邊。再利用 position 父子元素定位，將 h1 定位至中間。 :first-child::first-letter 將第一個元素的字首大寫。

Code

// css reset
* {
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: 'Noto Sans TC', sans-serif;
}

body {
    // background-color: #edece1;
    box-sizing: border-box;
}

.wrap {
    margin: 100px 0;
}

.container {
    width: 1200px;
    margin: auto;
    position: relative;
    h1 {
        width: 400px;
        // 留白
        padding: 15px;
        background-color: #eee;
        color: #aaa;
        position: absolute;
        // 區塊置中
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        // text center
        text-align: center;
        display: flex;
        align-items: center;
    }
    .content {
        column-count: 2;
        // 分成兩邊
        column-gap: 460px;
        p {
            line-height: 1.6;
            margin-bottom: 1em;
            &:first-child::first-letter {
                font-size: 40px;
                float: left;
                padding-right: 6px;
            }
        }
    }
}

參考：
https://www.youtube.com/watch?v=YYHqbVVXIGM&list=PLqivELodHt3hxeuLX8PYaI8u1GcDaBoJo&index=25