div要素を横並びにしたい時のfloatの注意とやり方

カードレイアウトなどをしたい時divを横並びにする必要があります。とりあえず横並びになったはいいけど、なんか全体的に崩れてしまったということも多いです。


<div id="main-wap">
<div class="main-content">
<h3>main-content-text-Title</h3>
</div><!--main-content-->
<div class="main-content">
<h3>main-content-text-Title</h3>
</div><!--main-content-->
</div><!--main-wap-->

main-wapに囲まれた2つのdivをfloatさせる時、横並びにしたい要素にただfloatをすると親要素の高さがなくなってしまい他の部分のレイアウトが崩れてしまう時があります

そうならないようにするためにも、対象のdivを包んでいる方にoverflow: hidden;を適応します。こうすることで親要素の高さを保ったまま要素を横並びにできます

返信を残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA