HOME > > > CSSの「float」使用時に幅をピッタリにする

CSSの「float」使用時に幅をピッタリにする

CSSの「float」使用時に幅をピッタリにする

floatにmarginを入れると、折り返しになっちゃう

WordPressやMTの記事一覧で繰り返しや、同じサイズのボックスを横並びにしたい。
横にdivを並べたい時はfloatを使います。 並べるという事はそれぞれ間を空けたいですよね。 ですが、floatにmarginを入れると幅いっぱいになると折り返しちゃいます。 そこで幅ぴったりにする方法をご紹介します。

HTMLはこんな感じ

HTMLはこんな感じになります。
「class=”left”」にfloat:left;が入ります。

<div class="mainbox">
 <div class="box">
  <div class="left">箱1</div>
  <div class="left">箱2</div>
  <div class="left">箱3</div>
 </div>
</div>

CSSはこんな感じ

今回は
・widthを800px
・1つのdiv(left)を250px
・div(left)のmargin-rightを30px
とします。

.mainbox{
 width: 800px;
}

.box{
 width: 840px;
 overflow: hidden;
}

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

解説します

上記のCSSだと800pxから40pxはみ出ます。 なのではみ出した部分は「overflow:hidden」で見えなくしてしまうのです。 そうすると800pxに横幅ぴったりになります。

解説図

このページを共有する

Facebook
twitter
Line
googleプラス
はてなブックマーク
Pocket

2014.03.01