CSS_文字排版2

文字排版2

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>
        <h3 class="clearcheck">clear-check：）</h3>
    </div>
</div>

CSS

基本上就是利用 float 來做文繞圖效果，最後記得要清除浮動。

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;
}

.container {
    width: 1200px;
    margin: auto;
    padding: 50px 0;
    h1 {
        width: 300px;
        text-align: right;
        // 留白
        padding: 15px;
        // background-color: #edece1;
        border-right: 3px solid #000;
        float: left;
        margin-right: 0.5em;
        font-size: 42px;
    }
    .content {
        padding: 0 15px;
        &::after {
            content: '';
            display: block;
            height: 0px;
            width: 100%;
            background-color: #f00;
            clear: both;
        }
    }
}

.clearcheck {
    width: 1200px;
    margin: auto;
    background-color: #fff;
    border: 1px solid #aaa;
    box-sizing: border-box;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 3px 3px 5px #888;
}

參考：
https://www.youtube.com/watch?v=-2sRROXi2pI&list=PLqivELodHt3hxeuLX8PYaI8u1GcDaBoJo&index=25&t=0s