문서의 이전 판입니다!

CSS Float Examples

description : CSS Float Examples
author : 오션
email : shlim@repia.com
lastupdate : 2021-03-15

Source of the article

CSS Layout - Float Examples

Grid of Boxes / Equal Width Boxes

float속성으로 콘텐츠 박스들을 나란히 띄우는 것이 쉽습니다.

예제

<!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>Grid of Boxes</title>
    <style>
        * {
            box-sizing: border-box;
        }
 
        .box {
            float: left;
            width: 33.33%;
            padding: 50px;
        }
 
        .clearfix::after {
            content: "";
            clear: both;
            display: table;
        }
    </style>
</head>
 
<body>
 
    <h2>Grid of Boxes</h2>
    <p>Float boxes side by side:</p>
 
    <div class="clearfix">
        <div class="box" style="background-color:#bbb">
            <p>Some text inside the box.</p>
        </div>
        <div class="box" style="background-color:#ccc">
            <p>Some text inside the box.</p>
        </div>
        <div class="box" style="background-color:#ddd">
            <p>Some text inside the box.</p>
        </div>
    </div>
 
    <p>
        Note that w also us the clearfix hack to take care of the layout flow, and that add the box-sizing property to make sure that the box doesn't break due to extra padding. Try to remove this
        code to see the effect.
    </p>
 
</body>
 
</html>

오션,, CSS, float, examples

문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

목차

CSS Float Examples

Source of the article

Grid of Boxes / Equal Width Boxes

예제

문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

목차

CSS Float Examples

Source of the article

Grid of Boxes / Equal Width Boxes

예제

문서 도구