内容へ移動
あちあち情報局
趣味や日曜プログラムなどを書いています
ユーザ用ツール
ログイン
サイト用ツール
検索
ツール
文書の表示
以前のリビジョン
バックリンク
最近の変更
メディアマネージャー
サイトマップ
ログイン
>
最近の変更
メディアマネージャー
サイトマップ
現在位置:
トップページ
»
CSS DIVを横並びにする方法
css_divyoko
この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。
{{tag>プログラミング関連 CSS}} [[start]]>[[programming_start]] ====== CSS DIVを横並びにする方法 ====== DIVを横並びにするために、簡単そうな3つの方法、どれも一長一短あり。 ----- ===== 共通部分 ===== 3つの方法すべてで使用するHTMLとスタイルシート <code html> <style> /* わかりやすいように色と線をつける*/ .b_gray{background:#eee;} .boder1{border:solid 1px #777;background:#fff;} </style> </code> <code html> <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> </code> ※空のコメント要素はinline-block時で改行の打消しで使用してる、inline-block以外の場合はコメントタグを削除しても良い。 ===== PR ===== <html> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- respon_0 --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-9251612436023685" data-ad-slot="1409739163" data-ad-format="auto"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </html> ===== floatを使う ===== <html> <style> /* わかりやすいように色と線をつける*/ .b_gray{background:#eee;} .boder1{border:solid 1px #777;background:#fff;} .wrap1{overflow:hidden;zoom:1;} /* zoom:はIE6+7対策 */ .wrap1:before,.a1_gridwrap:after{content: "";display: table;} .wrap1:after{clear: both;} .grid1{float:left;} </style> <div class="wrap1 b_gray"><!-- --><div class="grid1 boder1"><p>グリッドその1</p></div><!-- --><div class="grid1 boder1"><p>グリッドその2<br>グリッドその2</p></div><!-- --><div class="grid1 boder1"><p>グリッドその3</p></div><!-- --><div class="grid1 boder1"><p>グリッドその4<br />グリッドその4<br />グリッドその4<br />グリッドその4</p></div><!-- --><div class="grid1 boder1"><p>グリッドその5</p></div><!-- --><div class="grid1 boder1"><p>グリッドその6</p></div><!-- --> </div> </html> <code> <style> .wrap{overflow:hidden;zoom:1;} /* zoom:はIE6+7対策 */ .wrap:before, .wrap:after{content: "";display: table;} .wrap:after{clear: both;} .grid{float:left;} </style> </code> * 昔から使われている方法 * 折り返しが発生する場合は、gridに高さと幅を一定にしないと縦横共にズレてしまう。 * IE6はfloatで指定した方向のマージンが2倍になる不具合があるので注意が必要 * IE用にzoomを指定してるがIEに不具合があり、ol要素のリスト番号が1.2.3とならず1.1.1.となるので注意 ===== inline-block を使う ===== <html> <style> .grid2{display:inline-block;vertical-align:top;*display:inline;*zoom:1;} /* 後ろの2つはIE6+7対策 */ </style> <div class="wrap2 b_gray"><!-- --><div class="grid2 boder1"><p>グリッドその1</p></div><!-- --><div class="grid2 boder1"><p>グリッドその2<br>グリッドその2</p></div><!-- --><div class="grid2 boder1"><p>グリッドその3</p></div><!-- --><div class="grid2 boder1"><p>グリッドその4<br />グリッドその4<br />グリッドその4<br />グリッドその4</p></div><!-- --><div class="grid2 boder1"><p>グリッドその5</p></div><!-- --><div class="grid2 boder1"><p>グリッドその6</p></div><!-- --> </div> </html> <code> <style> .grid{display:inline-block;vertical-align:top;*display:inline;*zoom:1;} /* 後ろの2つはIE6+7対策 */ </style> </code> * 個人的には最も使う方法。 * 折り返しが発生する時はgridに幅を一定にしないと縦方向にズレが発生する。(※floatのように高さは一定にしなくても横方向は揃う) * HTML作成時に改行を使用すると隙間が発生するので、上記の共通HTMLのように改行をコメント要素で打ち消したりfont-size:0;を使う必要があり、スマートさに欠ける。 * IE用にzoomを指定してるがIEに不具合があり、ol要素のリスト番号が1.2.3とならず1.1.1.となるので注意 * vertical-align:で中央揃えも可能 ===== table-cell を使う ===== <html> <style> .grid3{display:table-cell;} </style> <div class="wrap3 b_gray"><!-- --><div class="grid3 boder1"><p>グリッドその1</p></div><!-- --><div class="grid3 boder1"><p>グリッドその2<br>グリッドその2</p></div><!-- --><div class="grid3 boder1"><p>グリッドその3</p></div><!-- --><div class="grid3 boder1"><p>グリッドその4<br />グリッドその4<br />グリッドその4<br />グリッドその4</p></div><!-- --><div class="grid3 boder1"><p>グリッドその5</p></div><!-- --><div class="grid3 boder1"><p>グリッドその6</p></div><!-- --> </div> </html> <code> <style> .grid{display:table-cell;} </style> </code> * 色々問題があるので使わない方が良い * 折り返しが発生しないのでレスポンシブデザインには向かない。 * 内側ブロック(class=grid)にマージン設定ができない。 ---- [[start]]>[[programming_start]]
css_divyoko.txt
· 最終更新: 2019/03/23 12:17 by
管理者
ページ用ツール
文書の表示
以前のリビジョン
バックリンク
文書の先頭へ