float

유석현(SeokHyun Yu)·2022년 11월 15일
0

CSS

목록 보기
26/32
post-thumbnail
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            div:nth-child(1) img {
                width: 300px;
                float: left;
                margin: 20px;
            }

            div:nth-child(2) img {
                width: 300px;
                float: right;
                margin: 20px;
            }

            div:nth-child(3) img {
                width: 300px;
                float: left;
                margin: 20px;
            }

            div:nth-child(3) p {
                clear: both;
            }
        </style>
    </head>
    <body>
        <div>
            <img src="css.png" />
            <p>
                Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nisi
                obcaecati sint expedita ducimus repellat quod aliquid maiores
                molestias laboriosam atque ipsam asperiores minus dicta magnam
                provident molestiae, quibusdam consectetur maxime. Minima iure
                dolore rerum, inventore voluptate necessitatibus officia
                veritatis voluptates nostrum, commodi natus possimus molestiae
                maiores quas suscipit unde voluptas veniam eligendi quos earum
                asperiores adipisci libero. Ratione, at soluta. Sequi
                voluptatibus veritatis quo inventore necessitatibus velit
                dolorum! Tenetur molestiae reiciendis nostrum corrupti est
                nesciunt dolorem veritatis facilis labore? Est neque perferendis
                voluptatum commodi quibusdam reprehenderit quaerat suscipit cum
                nesciunt. Eveniet, id est, eius minima at assumenda non odit
                accusantium maiores sequi minus earum in distinctio voluptate
                corporis quibusdam dolore? Soluta non consequatur animi
                molestias sunt ducimus, sed veritatis delectus. Ullam error
                ipsam explicabo expedita, a rerum quasi. Facere sed alias
                assumenda doloremque earum ad pariatur minus beatae consequuntur
                rerum, hic est eum sunt ullam dolorum ea? Incidunt, laboriosam
                facere. Quos fugit blanditiis omnis, rem magnam odio doloremque
                et dolore quo fuga enim sapiente esse aliquam totam assumenda
                quidem. Dolorem saepe laudantium, quasi totam obcaecati
                voluptatibus dignissimos mollitia necessitatibus enim. Numquam
                debitis voluptatibus vel. Modi voluptatibus dignissimos unde
                fugit, laudantium eos quidem! Quibusdam blanditiis similique,
                architecto nulla odio sint numquam necessitatibus veniam
                eligendi, eum rem qui, rerum quaerat at soluta! Quos cumque
                dolore, dolorem id delectus in optio minus autem unde magni sed
                explicabo repellat obcaecati tempore. Deleniti voluptatum hic
                expedita mollitia quam! Illo in vitae voluptatem atque omnis
                ipsam? Animi optio quam saepe quos fugiat beatae at recusandae
                qui nam magnam odio, est sint voluptas quia earum dicta sunt
                mollitia vitae eaque magni voluptate. Omnis veniam aspernatur
                possimus sunt? Amet ducimus velit temporibus quidem vel officiis
                numquam obcaecati sit dolores laboriosam, voluptatibus animi
                neque dolor magnam minus nam eligendi illo, pariatur tempora
                hic. Velit doloremque quo error omnis natus!
            </p>
        </div>
        <div>
            <img src="css.png" />
            <p>
                Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nisi
                obcaecati sint expedita ducimus repellat quod aliquid maiores
                molestias laboriosam atque ipsam asperiores minus dicta magnam
                provident molestiae, quibusdam consectetur maxime. Minima iure
                dolore rerum, inventore voluptate necessitatibus officia
                veritatis voluptates nostrum, commodi natus possimus molestiae
                maiores quas suscipit unde voluptas veniam eligendi quos earum
                asperiores adipisci libero. Ratione, at soluta. Sequi
                voluptatibus veritatis quo inventore necessitatibus velit
                dolorum! Tenetur molestiae reiciendis nostrum corrupti est
                nesciunt dolorem veritatis facilis labore? Est neque perferendis
                voluptatum commodi quibusdam reprehenderit quaerat suscipit cum
                nesciunt. Eveniet, id est, eius minima at assumenda non odit
                accusantium maiores sequi minus earum in distinctio voluptate
                corporis quibusdam dolore? Soluta non consequatur animi
                molestias sunt ducimus, sed veritatis delectus. Ullam error
                ipsam explicabo expedita, a rerum quasi. Facere sed alias
                assumenda doloremque earum ad pariatur minus beatae consequuntur
                rerum, hic est eum sunt ullam dolorum ea? Incidunt, laboriosam
                facere. Quos fugit blanditiis omnis, rem magnam odio doloremque
                et dolore quo fuga enim sapiente esse aliquam totam assumenda
                quidem. Dolorem saepe laudantium, quasi totam obcaecati
                voluptatibus dignissimos mollitia necessitatibus enim. Numquam
                debitis voluptatibus vel. Modi voluptatibus dignissimos unde
                fugit, laudantium eos quidem! Quibusdam blanditiis similique,
                architecto nulla odio sint numquam necessitatibus veniam
                eligendi, eum rem qui, rerum quaerat at soluta! Quos cumque
                dolore, dolorem id delectus in optio minus autem unde magni sed
                explicabo repellat obcaecati tempore. Deleniti voluptatum hic
                expedita mollitia quam! Illo in vitae voluptatem atque omnis
                ipsam? Animi optio quam saepe quos fugiat beatae at recusandae
                qui nam magnam odio, est sint voluptas quia earum dicta sunt
                mollitia vitae eaque magni voluptate. Omnis veniam aspernatur
                possimus sunt? Amet ducimus velit temporibus quidem vel officiis
                numquam obcaecati sit dolores laboriosam, voluptatibus animi
                neque dolor magnam minus nam eligendi illo, pariatur tempora
                hic. Velit doloremque quo error omnis natus!
            </p>
        </div>
        <div>
            <img src="css.png" />
            <p>
                Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nisi
                obcaecati sint expedita ducimus repellat quod aliquid maiores
                molestias laboriosam atque ipsam asperiores minus dicta magnam
                provident molestiae, quibusdam consectetur maxime. Minima iure
                dolore rerum, inventore voluptate necessitatibus officia
                veritatis voluptates nostrum, commodi natus possimus molestiae
                maiores quas suscipit unde voluptas veniam eligendi quos earum
                asperiores adipisci libero. Ratione, at soluta. Sequi
                voluptatibus veritatis quo inventore necessitatibus velit
                dolorum! Tenetur molestiae reiciendis nostrum corrupti est
                nesciunt dolorem veritatis facilis labore? Est neque perferendis
                voluptatum commodi quibusdam reprehenderit quaerat suscipit cum
                nesciunt. Eveniet, id est, eius minima at assumenda non odit
                accusantium maiores sequi minus earum in distinctio voluptate
                corporis quibusdam dolore? Soluta non consequatur animi
                molestias sunt ducimus, sed veritatis delectus. Ullam error
                ipsam explicabo expedita, a rerum quasi. Facere sed alias
                assumenda doloremque earum ad pariatur minus beatae consequuntur
                rerum, hic est eum sunt ullam dolorum ea? Incidunt, laboriosam
                facere. Quos fugit blanditiis omnis, rem magnam odio doloremque
                et dolore quo fuga enim sapiente esse aliquam totam assumenda
                quidem. Dolorem saepe laudantium, quasi totam obcaecati
                voluptatibus dignissimos mollitia necessitatibus enim. Numquam
                debitis voluptatibus vel. Modi voluptatibus dignissimos unde
                fugit, laudantium eos quidem! Quibusdam blanditiis similique,
                architecto nulla odio sint numquam necessitatibus veniam
                eligendi, eum rem qui, rerum quaerat at soluta! Quos cumque
                dolore, dolorem id delectus in optio minus autem unde magni sed
                explicabo repellat obcaecati tempore. Deleniti voluptatum hic
                expedita mollitia quam! Illo in vitae voluptatem atque omnis
                ipsam? Animi optio quam saepe quos fugiat beatae at recusandae
                qui nam magnam odio, est sint voluptas quia earum dicta sunt
                mollitia vitae eaque magni voluptate. Omnis veniam aspernatur
                possimus sunt? Amet ducimus velit temporibus quidem vel officiis
                numquam obcaecati sit dolores laboriosam, voluptatibus animi
                neque dolor magnam minus nam eligendi illo, pariatur tempora
                hic. Velit doloremque quo error omnis natus!
            </p>
        </div>
    </body>
</html>

profile
Backend Engineer

0개의 댓글