{{tag>プログラミング関連 CSS}} [[start]]＞[[programming_start]] ====== CSS DIVを横並びにする方法 ====== DIVを横並びにするために、簡単そうな3つの方法、どれも一長一短あり。 ----- ===== 共通部分 ===== 3つの方法すべてで使用するHTMLとスタイルシート

top

グリッドその1

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

グリッドその3

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

グリッドその5

グリッドその6

end

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

グリッドその1

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

グリッドその3

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

グリッドその5

グリッドその6

* 昔から使われている方法 * 折り返しが発生する場合は、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

* 個人的には最も使う方法。 * 折り返しが発生する時は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

* 色々問題があるので使わない方が良い * 折り返しが発生しないのでレスポンシブデザインには向かない。 * 内側ブロック(class=grid)にマージン設定ができない。 ---- [[start]]＞[[programming_start]]