mozila系ブラウザでのブロック要素の配置
-
0 名前： たなしん ： 2005/06/05 00:09
- <html lang="ja">
<head>
<title></title>
</head>
<body>
<!--大ブロックstart-->
<div style="width: 700px; margin: 0 auto; padding: 0; border: 1px solid black;">
<div style="float:left; width: 200px; margin: 0; padding: 0; background-color: #ff9;">
ブロック小1</div>
<div style="float:left; width: 300px; margin: 0; padding: 0; background-color: #99f;">
ブロック小２</div>
</div><!--大ブロック end-->
</body>
</html>
NN7.1で、700ピクセルの大ブロックの中に「小ブロック1」と「小ブロック２」
が入りません。（大ブロックに「height」を指定すれば入りますが。）
見た目で詳しく言うと、700ピクセルのブロックが上下つぶれてただの横線になり、
その横線にぶら下がるように「小ブロック1」と「小ブロック1」が配置されて
しまいます。
IEだと大丈夫です。
どこか間違っていますか？
-
1 名前： び ： 2005/06/05 00:09 ［URL］
- floatによって浮動した要素は、通常フローに属さないので、
height:autoの時にはその計算には含まれず、
Mozillaではそのようになります。
http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/visuren.html#floats
http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/visudet.html#Computing_heights_and_margins
ブロック小２の後で、floatをclearするとよいです。
-
2 名前： たなしん ： 2005/06/05 00:09
- び さんお返事、ならびに回答感謝します！
-
3 名前： たなしん ： 2005/06/05 00:09
- と、びさんのご紹介のページを見てみましたが難しいですね。
>>ブロック小２の後で、floatをclearするとよいです。
とありますが、私の例で言うとブロック小２の後には何の要素も無いので
例えば <br style="clear: left;"> などと新たに何かしらの要素を
書き加えなければならないと言う事でしょうか？
確かにうまくいきましたが、<br>で良かったのか自信ありません。
-
4 名前： び ： 2005/06/05 00:09 ［URL］
- そうですね。難しいところです。
何かの要素を加えなければいけません。
<br>だと気持ちが悪いのであれば
大ブロックに関わる何らかの情報を加えるというテもありますが
やっぱり本末転倒ですし、
無理にこのようなことをすると、
<br>一つよりも、文書の価値が低下する原因になるかもしれません。
-
5 名前： Pid ： 2005/06/05 00:09
- hr 要素はどうでしょうか。{ visibility: hidden; } しておけばさほど邪魔になりませんし，スタイルが適用されない環境での区切りとして割と便利ですし。
もちろん，実際の文書構造を優先するのは言うまでもありませんが。
-
6 名前： たなしん ： 2005/06/05 00:09
- びさん、Pidさん、素人相手に返答下さり感謝します。
<br>も手段としては間違っていなさそうなのでほっとしました。
<hr>も一つの手段として引き出しに入れておきます。
ありがとうございました。
