float

9379 ワード
TIL CSS html テキストリンク

float


floatは主に画像の周囲にテキストを包むために作成されたpropertyである.
レイアウトに使用される一般的なプロパティですが、操作やメンテナンスが困難なため、最近はあまり使用されていません.
(最近flexプロパティに基づいて多くのレイアウトが行われています.)
floatプロパティとwidth、heightプロパティを使用して、<div>タグを配置できます.
<!DOCTYPE html>
<head>
    <title>float</title>
    <style>
        .ex-layout {
            height: 310px;
        }

        .menu {
            width: 300px;
            height: 40px;
            border: 2px solid #09c;
        }

        .main .left-menu {
            float: left;
            width: 50px;
            height: 254px;
            border: 2px solid red;
            background-color: #ffe7d5;
        }

        .main .content {
            float: left;
            width: 250px;
            height: 250px;

        }

        .main .content .article {
            background-color: #e2e9ff;
            border: 2px solid blue;
            height: 200px;

        }

        .main .content .comment {
            background-color: #ffddff;
            border: 2px solid purple;
            height: 50px;

        }
    </style>
</head>

<body>
    <div class="ex-layout">
        <div class="menu">menu</div>
        <div class="main">
            <div class="left-menu">left menu</div>
            <div class="content">
                <div class="article">article</div>
                <div class="comment">comment</div>
            </div>
        </div>
    </div>
</body>

</html>

参考にする。
参考にする。
C#ファイル処理関連整理(アップロード、ダウンロード、読み取り)
[JavaScript30] 🎞 28. Video Speed Controller UI