「CSS入門」floatで浮動要素の位置を設定する方法
構文
1.キーワード値
float: none;
float: left;
float: right;
float: inline-start;
float: inline-end;
2.グローバル値
float: inherit;
float: initial;
float: unset;
htmlコード
<section>
<div class="left">A001 AAAAAAAAA</div>
<div class="left">B002 BBBBBBBB</div>
<div class="right">C003 CCCCCC</div>
<p>Test123456.</p>
</section>
<section>
<div class="left">A001 AAAAAAAAA</div>
<div class="left">B002 BBBBBBBB</div>
<div class="right">C003 CCCCCC</div>
<p>Test123456.</p>
</section>
<section> <div class="left">A001 AAAAAAAAA</div> <div class="left">B002 BBBBBBBB</div> <div class="right">C003 CCCCCC</div> <p>Test123456.</p> </section>
CSSコード
section {
border: 2px solid red;
}
div {
margin: 8px;
}
.left {
background: green;
}
.right {
background: yellow;
}
section {
border: 2px solid red;
}
div {
margin: 8px;
}
.left {
background: green;
}
.right {
background: yellow;
}
section { border: 2px solid red; } div { margin: 8px; } .left { background: green; } .right { background: yellow; }