- ベストアンサー
html+cssでfloatに関して
- floatを使用して3列並びのレイアウトを作成する方法について教えてください
- widthが250pxのブロックを50pxの間隔で配置し、それを格納するボックスの幅が850pxの場合、ulのwidthを900pxにすることで解決できますが、これに問題はありますか？
- さらに、もっといいやり方があれば教えてください
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
＞にして解決したのですが、これは問題あるのでしょうか これは人に聞いても、意味がない。やりたい事や、表示上の配置のよしあしは人の感性なので、表示上それでよければ、それでいい。 問題が出てくるとしたら２つ。 １．動的なレイアウトの変更。 ２．ブラウザのレイアウトの互換性（フォーマットはエンジンによって違う） １はJavaScriptやAjax、ServerSidScriptで動的に変更された場合は、微妙に動作がつかめないときがたくさん。 ２は本来、W3Cなどで標準化されてDTDが決まっているが、実はそれに基づいてのフォーマットの細かい規則はなく、グローバルスタンダード製品に合わされるのが、一般的。 なぜ２つに問題があるかだが、 よくHTMLオブジェクトの仕様を見てもらえればわかるが、DIVはブロックオブジェクトである事はわかっているよね。あなたの計算には、ボーダーのサイズとパディングの幅の計算が、いまいち。それで、レイアウトが狂ってくる。 これは、フォントに関係する属性も影響する。ベースラインですね。このコントロールをすれば、思いとおりのレイアウトになりますよ。 現在の設定だと、上位のBOXが自動拡張されてしまっている。 じゃ、それが悪いかと聞かれると、それを意図してやる場合もあるので、悪いといえなのである（特に動的に変わる場合）。 なので、それ以上変更される予定がない、使い回しをしないのであれば、表示上満足しているのであれば、それでいいいのではないでしょうか。
その他の回答 (1)
- yui-magic
- ベストアンサー率62% (20/32)
ブラウザによってはborderの幅等はwidthとは別勘定になることがあります。 確実に横３列に並ばせたいのであればtableタグを使ってみてはどうでしょうか？
お礼
ご回答ありがとうございます！ CSSを見て頂ければわかります通り、今回borderは使用しておりません。 また、<li>内容</li>は自動で増えることを想定しているのでtableではなく<li>を使用しておりました。言葉が足らず申し訳ありません＞＜
お礼
＞これは人に聞いても、意味がない。やりたい事や、表示上の配置のよしあしは人の感性なので、表示上それでよければ、それでいい。 現状IE6～IE8、macのff、chromeで正常な表示が確認されておりますので、これを使用したいと思います！ありがとうございます。 ちなみにpaddingとborderはどこにも使用しておりません。また、ブラウザによってその計算が変わってくることは理解しております。 ＞現在の設定だと、上位のBOXが自動拡張されてしまっている。 ＞じゃ、それが悪いかと聞かれると、それを意図してやる場合もあるので、悪いといえなのである（特に動的に変わる場合）。 私の言葉が足らず本当に申し訳なかったのですが、こちらに関しての質問でございました。今回のコーディングでは意図的にdivの幅を超えてulの幅を設定することで<li>のマージンをすべて同じにしつつ、両サイドがdivの幅に合うようなデザインを実現するということがいいのかどうか、ということでございました。 どうもありがとうございました。