TIL 04. Floatについて

5640 ワード
CSS html テキストリンク
Floatは、HTML、CSSで写真などをソートするために使用されます.
私たちがよくホームページで自然に目にするFloatはVertical Floatと言えます.内容は上から下まで順番に見ているので.
ただし、左から右にコンテンツを表示する場合は、Horizontal Floatを適用する必要があり、float propertyを適用する必要があります.
最近はFlexをもっと使っていますが、Floatを知っていれば、
left:要素を左側にサスペンションするように設定
right:要素を右側に表示するように設定
none:デフォルト、方向は指定しません
<img width="200px" height="200px" src="https://bit.ly/3tEMB2f">
<div>
 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 무궁화 삼천리 화려강산 대한사람 대한으로 길이 보전하세.
</div>

画面に示すように出力が完了しました.
Floatプロパティが適用されます.

Float Left

<p><img style="float:left" src="https://bit.ly/3tEMB2f" width="200px" height="200px" /></p>
<div>동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 무궁화 삼천리 화려강산 대한사람 대한으로 길이 보전하세.</div>

写真は文章の左側に印刷されます.

Float Right

<p><img style="float:right" src="https://bit.ly/3tEMB2f" width="200px" height="200px" /></p>
<div>동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 무궁화 삼천리 화려강산 대한사람 대한으로 길이 보전하세.</div>

写真は文章の右側に印刷されます.
[アルゴリズム]最短パス-floydwalsh
「excelのエクスポート」圧力テストの同時多発性によるマルチスレッド競合の問題