CSSで2分割したいが片方のWIDTHの長さを可変にしたい
2015/01/22 Thu.
CSSで横にDIVなどブロック要素を分割して並べるときには「float」プロパティーを使います。
しかし、floatを使う要素にはwidthで幅を指定しなければなりません。
（例）
<div style="width: 100%;">
<div style="width: 200px; float: left;">左っぽい</div>
<div style="width: 300px; float: left;">右っぽい</div>
</div>
こうです。
<div style="width: 200px; float: left;">左っぽい</div>
<div style="width: 300px; float: left;">右っぽい</div>
</div>
こうです。
ちなみに、（例）の3行目のfloatはleftでもrightでもどっちでもいいです。
さて、今回、この「右っぽい」の部分を可変にしたいと思いました。
いろいろ「あーだこーだ」やりましたが、うまくいく場合いかない場合ありまして、最終的に決着した方法が凄く簡単なやり方だったので備忘録。
（解決）
<div style="width: 100%;">
<div style="width: 200px; float: left;">左っぽい</div>
<div style="margin-left: 200px;">右っぽい</div>
</div>
<div style="width: 200px; float: left;">左っぽい</div>
<div style="margin-left: 200px;">右っぽい</div>
</div>
簡単すぎて恥ずかしくなってしまふ。
なお、左右の間に隙間を開けたい場合はmarginの数値を大きくすればいい。
あと、clear: both;でfloatを解除することも忘れちゃいやよん。
- 関連記事
category: HTML・CSS
この記事へのコメント
コメントの投稿
コメントは全て管理人が内容を確認してから表示されます（非公開コメント除く）。
内容によっては表示されない場合がありますことご了承願います。
内容によっては表示されない場合がありますことご了承願います。
« ハードディスクの壊れっぷり続報
ハサミでチップを適当に切り切りしたらiPhone5のアクティベーションが成功した »
