あちあち情報局

趣味や日曜プログラムなどを書いています

ユーザ用ツール

サイト用ツール


サイドバー

メニュー

現在リニューアル中

タグ一覧

programs:css_divyoko

CSS DIVを横並びにする方法

DIVを横並びにするために、簡単そうな3つの方法、どれも一長一短あり。


共通部分

3つの方法すべてで使用するHTMLとスタイルシート

<style>
/* わかりやすいように色と線をつける*/
.b_gray{background:#eee;}
.boder1{border:solid 1px #777;background:#fff;}
</style>
<p>top</p>
<div class="wrap b_gray"><!--
--><div class="grid boder1"><p>グリッドその1</p></div><!--
--><div class="grid boder1"><p>グリッドその2<br>グリッドその2</p></div><!--
--><div class="grid boder1"><p>グリッドその3</p></div><!--
--><div class="grid boder1"><p>グリッドその4<br />グリッドその4<br />グリッドその4<br />グリッドその4</p></div><!--
--><div class="grid boder1"><p>グリッドその5</p></div><!--
--><div class="grid boder1"><p>グリッドその6</p></div><!--
-->
</div>
<p>end</p>

※空のコメント要素はinline-block時で改行の打消しで使用してる、inline-block以外の場合はコメントタグを削除しても良い。

PR

floatを使う

グリッドその1

グリッドその2
グリッドその2

グリッドその3

グリッドその4
グリッドその4
グリッドその4
グリッドその4

グリッドその5

グリッドその6

<style>
.wrap{overflow:hidden;zoom:1;} /* zoom:はIE6+7対策 */
.wrap:before,.a1_gridwrap:after{content: "";display: table;}
.wrap:after{clear: both;}
.grid{float:left;}
</style>
  • 昔から使われている方法
  • 折り返しが発生する場合は、gridに高さと幅を一定にしないと縦横共にズレてしまう。
  • IE6はfloatで指定した方向のマージンが2倍になる不具合があるので注意が必要
  • IE用にzoomを指定してるがIEに不具合があり、ol要素のリスト番号が1.2.3とならず1.1.1.となるので注意

inline-block を使う

グリッドその1

グリッドその2
グリッドその2

グリッドその3

グリッドその4
グリッドその4
グリッドその4
グリッドその4

グリッドその5

グリッドその6

<style>
.grid{display:inline-block;vertical-align:top;*display:inline;*zoom:1;} /* 後ろの2つはIE6+7対策 */
</style>
  • 個人的には最も使う方法。
  • 折り返しが発生する時はgridに幅を一定にしないと縦方向にズレが発生する。(※floatのように高さは一定にしなくても横方向は揃う)
  • HTML作成時に改行を使用すると隙間が発生するので、上記の共通HTMLのように改行をコメント要素で打ち消したりfont-size:0;を使う必要があり、スマートさに欠ける。
  • IE用にzoomを指定してるがIEに不具合があり、ol要素のリスト番号が1.2.3とならず1.1.1.となるので注意
  • vertical-align:で中央揃えも可能

table-cell を使う

グリッドその1

グリッドその2
グリッドその2

グリッドその3

グリッドその4
グリッドその4
グリッドその4
グリッドその4

グリッドその5

グリッドその6

<style>
.grid{display:table-cell;}
</style>
  • 色々問題があるので使わない方が良い
  • 折り返しが発生しないのでレスポンシブデザインには向かない。
  • 内側ブロック(class=grid)にマージン設定ができない。
programs/css_divyoko.txt · 最終更新: 2018/04/03 18:52 by 管理者