【CSS】floatでコンテンツがカラム落ち!その時の対処法。

かわんです。

CSSでコンテンツを横並びにする方法は色々とあります。僕の場合、gridやflexを使う事が多いのですが、久々にfloatを使ってみました。

コンテンツに「margin-right:30px;」にして3列にしようとしたんですが、3つめのコンテンツがカラム落ち。

そんな時どうしたら良いのかの解説をします。

まずはHTMLから。

<section id="main-contents">

<div class="box-container">

<div class="box">
<p>image</p>
</div><!-- box -->
    
<div class="box">
<p>image</p>
</div><!-- box -->
  
<div class="box">
 <p>image</p>
</div><!-- box -->

 </div><!-- box-container -->
      
 </section><!-- main-contents -->

「main-contents」で全体を囲みます。

そして、「box-container」で3つの「box」を纏めています。

ここがポイントです。「box」を「box-container」で囲んでいる訳です。

CSSはこんな感じです。

#main-contents {
width: 960px;
}

.box-container {
width: 990px;
margin-right: -30px;
}

.box {
width: 300px;
height: 300px;
margin-right: 30px;
float: left;
}

「main-contents」に全体の幅を指定。今回は960pxになります。「box」の幅は300pxです。あと、「margin-right:30px;」で設定。実質330pxになります。これが3つある訳ですね。

合計で990px(330px×3個)になります。あれ?「main-contents」は960pxだと書いているので、この時点でカラム落ちです。

そこで活躍するのが「box-container」の「margin-right: -30px;」です。ネガティブマージンを使います。これでカラム落ちせずに3列で表示させる事が出来ます。

なお、「box-container」は、330px×3個の合計サイズを指定します。合計で990pxになるのですね。

注意点

今回は僕の環境で実現出来たことです。もし上手くいかない場合はごめんなさい・・・。他サイト様の記事をご確認下さい。

また、HTMLとCSSをいじるので、予期せぬトラブルが発生することがありますので、バックアップしてからお試し下さい。

なお、サポート出来ませんので自己責任で行って下さいね。

さいごに

ということで、色々と書いてみました。

手法的には定番なのかな?floatを使う場合は必須ですね。まぁ、最終列にクラスを割り当ててネガティブマージンでも良いかもですが・・・。

その都度、最終列にクラスを割り当てるのはスマートではないので、今回の方法がおすすめです。

おしまい。