CSS の基本チュートリアル: フローティング
CSS float
float: 要素をフロートにします。値は次のとおりです: left (左 float)、right (右 float)
フローティング要素は左または右にフロートし、次のようにフロートします。要素の端、または前のフロート要素の端までの周囲。
浮動要素はスペースをとらなくなり、浮動要素のレベルは通常の要素よりも高くなります。
浮動要素は「ブロック要素」でなければなりません。もともとどんな要素だったとしても。
フローティングされた要素の幅が指定されていない場合、フローティングされた後は可能な限り狭くなります。したがって、フローティング要素は通常、幅と高さが固定されています。
連続する複数の要素は一緒にフローティングする必要があります。
フローティング機能: 複数のブロック要素を並べて配置できます。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>php.cn</title>
<style type="text/css">
.box{
width:350px;
height:400px;
background-color:#f0f0f0;
}
.box1{
width:50px;
height:50px;
background-color:#ff0000;
float:left;
}
.box2{
width:50px;
height:50px;
background-color:#00ff00;
float:left;
}
.box3{
width:50px;
height:50px;
background-color:#0000ff;
float:left;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">php.cn</div>
<div class="box2">php.cn</div>
<div class="box3">php.cn</div>
</div>
</body>
</html>Q: 要素を囲み、浮動要素をラップするにはどうすればよいですか?
現時点では、次のセクションの知識が必要です。フローティング要素では、クリアフローティング操作を使用します。
新しいファイル
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>php.cn</title>
<style type="text/css">
.box{
width:350px;
height:400px;
background-color:#f0f0f0;
}
.box1{
width:50px;
height:50px;
background-color:#ff0000;
float:left;
}
.box2{
width:50px;
height:50px;
background-color:#00ff00;
float:left;
}
.box3{
width:50px;
height:50px;
background-color:#0000ff;
float:left;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">php.cn</div>
<div class="box2">php.cn</div>
<div class="box3">php.cn</div>
</div>
</body>
</html>
プレビュー
Clear
- おすすめコース
- コースウェアのダウンロード
現時点ではコースウェアはダウンロードできません。現在スタッフが整理中です。今後もこのコースにもっと注目してください〜
このコースを視聴した生徒はこちらも学んでいます
