- ベストアンサー
inlineでテキストの入ったボックスを横に並べる
いつもお世話になっています。 inlineでテキストが中に入った高さの違うボックスを横に並べる方法に ついてです。float1～6が題名で、あいうえお等がその下に説明文として 並ぶと思ってください。 確認ブラウザ 【OK】Win ie6、ie7、Fx3.5.2、Opera、Mac Safari 【NG】Mac Fx2.0 添付画像のように<dt>と<dd>が横に並んでしまい、<dt>の下に来てくれ ません。<dt><dd>どちらをclearしてもだめでした…。 宜しくお願いします！！ <style> div.wrap { width: 600px; background: #EEEEEE; padding: 8px; border: 1px solid #333333; } div.box { display: -moz-inline-box; display: inline-block; /display: inline; /zoom: 1; width: 160px; height: 130px; margin: 8px; border: 2px solid #333333; background: #DDDDDD; vertical-align: top; padding: 8px; } div.height { height: 200px; border: 2px solid #FF9999; background: #FFEEEE; } dd{ width: 150px; float: left; } dt { float: left; clear: left; } </style> <html> <body> <div class="wrap"> <div class="box"> <dt>float 1</dt> <dd>ああああああああああああああああああああああああああああああああああああ</dd> </div><!-- --><div class="box height"> <dt>float 2</dt> <dd>いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい</dd></div><!-- --><div class="box"> <dt>float 3</dt> <dd>うううううううううううううううううううううううううううううううううううう</dd> </div><!-- --><div class="box"> <dt>float 4</dt> <dd>ええええええええええええええええええええええええええええええええええええ</dd></div><!-- --><div class="box"> <dt>float 5</dt> <dd>おおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおお</dd> </div><!-- --><div class="box"> <dt>float 6</dt> <dd>かかかかかかかかかかかかかかかかかかかかかかかかかかかかかかかかかかかか</dd></div> </div> </body> </html>
- HTML
- 回答数6
- ありがとう数8
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
> abrilさんならどう組みますか？ 前回までに述べた理由により、論理構造的には良しとは思いませんが、質問者様のオリジナルの構造に近いHTMLであれば、一例として。 ※各環境が標準準拠モードになっていると仮定した場合です。 ※IE6のWマージンのバグなども考慮していません。 【CSS】 div.wrap { width: 600px; padding: 8px; border: 1px solid #333; background: #eee; } div.row { zoom: 100%; } div.row:after { display: block; height: 0; visibility: hidden; content: "."; clear: left; } div.row dl { float: left; width: 160px; height: 130px; margin: 10px; padding: 8px; border: 2px solid #333; background: #ddd; overflow: auto; } div.row dl.special { height: 200px; border-color: #f99; background: #fee; } div.row dl dt, div.row dl dd { （余白等調整したければ任意で。） } 【HTML】 <div class="wrap"> <div class="row"> <dl> <dt>float 1</dt> <dd>ああああ…</dd> </dl> <dl class="special"> <dt>float 2</dt> <dd>いいいい…</dd> </dl> <dl> <dt>float 3</dt> <dd>うううう…</dd> </dl> </div> <div class="row"> （以下、同様に4～6番目の定義リストを繰り返す） </div> </div> ちなみに。 > floatで普通にやろうと思ったのですが、段の中にheightの高さの違うものが混じったりするとレイアウトが崩れませんか？ 上記サンプルや他の方の回答例の様に、3ボックス（dl）毎に親要素で囲んでfloatをクリアする、といった様な対応をしなければ、1行毎に頭が揃わずでここぼになります。入れ子構造になっているのはそれを回避する為の手段の一つです。
その他の回答 (5)
inlineかなーと思ったんです。 >>こういう場合は、全部blockでＯＫです。
お礼
おぉぉ～！ 子要素全部にdisplay: block;すると、ちゃんと並びますね！ ありがとうございました！
(1)グレーの部分は幅を指定(clear-bothでmargin-right,leftはauto) (2)左の２つはfloat-left (3)右はfloat-right (4) (2)と(3)をdivで括ってclear-both (5) (2)行目は(2)～(4)の繰り返し -- dt,dd は左右になにも配置しないなら、clear-bothでいいですよ。 普通、これで、大丈夫ですが。。
お礼
再度の回答ありがとうございます、 私も最初はfloatで普通にやろうと思ったのですが、 段の中にheightの高さの違うものが混じったりするとレイアウトが 崩れませんか？ 私も同じように考えてました。で、inlineかなーと思ったんです。 ありがとうございました！
dt,dd は左右になにも配置しないなら、clear-bothでいいですよ。
お礼
ありがとうございます、 私もそうかなーと思ってclearしてみたりもしたんですが、 mac Fx2では表示は崩れたままなんです…
- abril
- ベストアンサー率69% (388/560)
No.1です。補足を拝見しました。 > この元のソースは他のサイトからのコピペだったのですが、そうですよね鵜呑みにしてましたがdlでくくらなきゃいけないんですよね。 世の中には文法的に正しくないソースも氾濫してますから… > floatしたらどうなんだろう、とあれこれやってみたんです。 floatはこの場合逆効果です。浮いた要素は隣接する要素の横に流れ込みますから。 > やはり何かのバグだろうと思うので、 考えられる原因ですが、display: -moz-inline-box;という、Mozilla独自の拡張属性がMac版Firefox2では意図通り機能していないのかもしれません。 -moz-inline-boxの挙動については、下記のコンテンツなど参考になるのではないでしょうか。 【参考】http://nanto.asablo.jp/blog/2009/04/28/4272284 > でも結果は同じなんです。やはり<dt>の右横に<dd>が並び、また<dd>にwidthを指定しないとそのまま一行で右へテキストが流れてしまいます。 No.1の方法を試してみても、Firefox 2 on Macでは上記の状態になってしまう、という事ですね。 実際の状態を確認したいので、とりあえずMac版Fierfox 2をインストールしてみました。確かに、子要素dtとddに直接display: block;を指定してブロック表示を強制しようとしても、Firefox 2では無効になる様ですね。色々検証してみた感じでは、-moz-inline-boxの子要素にdisply: block;とmoz-box-flex: 1;を指定すれば、はみ出す事はなくなりますが横並び状態は改善されません。どうやら-moz-inline-boxの中に直接いれられるdisply: block;状態の子要素は一つのみの様です。<p>も二つ並べると崩れてしまいますね。 【横並びになる】 <div class="box"> <h1>float 1</h1> <p>ああああ…</p> </div> 【見た目OKだが要素を分けられない】 <div class="box"> <p>float 1<br /> ああああ…</p> </div> 私自身はできるだけレンダリング・エンジン依存の拡張属性は使わない方向で考えるので、こういうケースではおそらく別のやり方を検討すると思いますが、今回の-moz-inline-box;を使ったままで何とか回避できる方法はないかと試行錯誤した結果、以下のような構造であればFirefox 2 on Macでも他の環境と同じにする事ができました。ただし、入れ子が多いので満足の行くものではないのですが… 【CSS】 div.wrap { （省略、そのまま） } div.box { （省略、そのまま） } div.height { （省略、そのまま） } dl.hoge { width: 160px; margin: 0; } dl.hoge dt, dl.hoge dd { （余白等調整したければ任意で。） } 【HTML】 <div class="wrap"> <div class="box"> <dl class="hoge"> <dt>float 1</dt> <dd>ああああ…/dd> </dl> </div> <div class="box height"> <dl class="hoge"> <dt>float 2</dt> <dd>いいいい…</dd> </dl> </div> <div class="box"> <dl class="hoge"> <dt>float 3</dt> <dd>うううう…</dd> </dl> </div> （以下、同様に4～6番目の定義リストを繰り返す） </div> display: -moz-inline-box;を使用した親要素<div class="box">～</div>の直接の子要素として<dl class="hoge">～</dl>を入れ子にし、そのdlに対してwidthをdiv.boxと同じ160pxで指定（100%ではだめ）してやると、続く子要素dtとddの挙動は本来のブロック要素としての表示に戻ります。 また、これらの指定自体は本来は親要素から継承されていて省略可の値を子要素に明示しただけなので、元々【OK】だった環境にも影響を与えない筈です。 再度試してみて頂けますでしょうか？ > 今回は文法的にはベターじゃない方法をとらざるを得ないのかなーと思っています。 今回のソースも入れ子が多い・本来は内容的には一続きの定義リスト（ですよね？）を分ける、という点では「文法的（というより論理構造的）にはベターじゃない」ですが、「文法的に間違い」ではありません。前者と後者の意味合いは全く違うと思いますので、くれぐれも「文法からして間違っている」ソースは参考になさらない事をお奨めします。現在は「たまたまセーフの様に”見えて”」いても、今後、ブラウザ側が本体の仕様に準じたよりストリクトなものにアップグレードしていった場合には、文法違反のものはそれだけで致命的な表示結果を生む様になりかねません。
お礼
お礼が遅くなって申し訳ございません、再度の回答ありがとうございます！ わざわざFx2をインストールまでしていただいて、本当にすみません、 Win ie6,7,opera,Fx、Mac Safari,Fx2全て同じ表示にできました。 dlにもう一度widthを指定してやるとdt,ddに継承されたんですね。 すっきりしました。ありがとうございました！
補足
また、 >レンダリング・エンジン依存の拡張属性は使わない方向で考えるので ということですが、こういう場合ですとabrilさんならどう組みますか？ 勉強のために教えてください。 （もしお時間なければスルーしていただいて結構です^^;）
- abril
- ベストアンサー率69% (388/560)
直接の回答ではないのですが…質問者様のソースはそれ以前の問題を抱えているので。 dt及びddの直接の親要素として許されるのは、dlのみです。質問のソースの様に、divを直接の親にする事はできません。 divの中に定義リストを内包するなら、文法上正しい記述はこなります。 <div class="hoge"> <dl> <dt>定義名</dt> <dd>定義内容</dd> </dl> </div> 現在（たまたま）【OK】に見えている環境が結構あるらしいので、【NG】の原因はこの事に依るものではないでしょうが。 ＃ちなみに、Mac版のFirefoxの古いヴァージョンはWindows版に比べると若干不具合が多かった事は確かです。 ＃おそらくMacユーザでFirefoxを使用している方達のほとんどは既にver.3.xにアップグレード済みだと思うので、できればそちらでの表示確認もしてみた方が宜しいかと。 それから、「<dt>と<dd>が横に並んでしまい、<dt>の下に来てくれません。」というなら、【OK】の状態とは「（dlのディフォルトの見え方通り）dtの下（改行してから）にddが続く」という事なのですよね？であれば、何故、dtとddをfloatさせたりしているのでしょう？この意味がわかりません。妙なfloatやwidthの組み合わせの為に【OK】の環境であっても、div.boxで指定されているwidth: 160px;の幅よりも、ddの内容がはみ出して描画されていますがそれはお望みの状態ではないですよね？ 一続きの定義リストではなくなってしまいますので論理的には満足の行く構造ではないのですが、できるだけオリジナルのソースを活かす手っ取り早い方法に限定して考えると、HTML側を文法上正しい構造に修正した上で、dtやddの不要と思われるスタイルを削除すれば良いのでは？ 一例として… 【CSS】 （省略） dl.box { （div.boxの指定をそのまま記述） } .height { （省略） } ※dt、ddは特に指定なし。インデントや余白を調整したいならお好みで。 【HTML】 （省略） <div class="wrap"> <dl class="box"> <dt>float 1</dt> <dd>あああああ…</dd> </dl> <dl class="box height"> <dt>float 2</dt> <dd>いいいいい…</dd> </dl> <dl class="box"> <dt>float 3</dt> <dd>うううううう…</dd> </dl> （以下、同様に4～6番目の定義リストを繰り替えす） </div> （省略） この状態で、少なくともdl毎に指定したスタイルで横並びになり、且つ、dtの下にddが描画され、且つ【OK】環境でも出ていたボックスからddの内容がはみ出す不具合も解消、という状態になると思いますが、いかがでしょうか？ ＃Mac版Firefox2は手元にありませんので、実際の表示結果は未検証です。 それから、ddの内容量がボックスのスタイルとして指定した高さを超えるとはみ出してしまいますので、overflowの処理もしておいた方が宜しいかと。
お礼
いつもありがとうございます！ この元のソースは他のサイトからのコピペだったのですが、そうですよね 鵜呑みにしてましたがdlでくくらなきゃいけないんですよね。 でも結果は同じなんです。やはり<dt>の右横に<dd>が並び、また<dd>に widthを指定しないとそのまま一行で右へテキストが流れてしまいます。 boxの枠を越えて。 で、floatしたらどうなんだろう、とあれこれやってみたんです。 もう、Mac Fx2.0はいいか、とも思うのですが （Fx3.0に家がアップできていないので確認できないのです…とほほ） 念のため<dl><dt><dd>を使わずに単純に<div><p><p>で同様に作ってみると ちゃんと表示されるんですよね。 （divのborderの中に上から題名、そのすぐ下に説明文という外観で） というからにはやはり何かのバグだろうと思うので、今回は文法的には ベターじゃない方法をとらざるを得ないのかなーと思っています。 でもとても参考になりました。ありがとうございました。
お礼
ありがとうございます！ すっきりとしていて他にも応用がききますね。 dlをフロートさせて、その親にclearfix。 私が確認できたブラウザ全てでOKでした。 無理してinline-block使おうとしなくてもいいですね。 本当にありがとうございました。