WEB相談室

Webページ作成に関しての何でも掲示板です。

タイトル:2つのUL要素を段組にしたい

0:[投稿] かっつん [2005/11/29 16:25 ] [環境:IE、Opera、FireFox UNIX]

以下のようなCSSとHTMLなのですが、IEでは段組になるのですが、
OperaやFireFoxでは右側が左側のブロックより下に表示されます。
私のCSSが悪いのか、あるいはブラウザのバグなのか、いまいち
理解できません。何が悪いのでしょうか?

ul.L {
   width: 30%;
   float: left;
}

ul.R {
   width: 30%;
   float: right;
}

<ul class="L">
・・・・
</ul>

<ul class="R">
・・・・
</ul>


1:[回答] xhtml? [2005/11/30 16:06 ]

これだけではよくわかりませんが。左右振り分けのBOXの
外側の親BOXの幅を指定すればどうでしょう。


2:[回答] ふと [2005/11/30 17:23 ]

> IEでは段組になる
ホントに!?

> float: right;
leftの間違いでしょう。floatはalign属性ではありませんが。


3:[回答] ふと [2005/11/30 17:33 ]

補足。
もし、そのソースから推測されるマークアップで、3カラムデザインをしたいということなら
positionを使った方が楽だと思います。


4:[保留] かっつん [2005/11/30 18:14 ]

下のソースを、IEで表示させたときと、Opera・FireFoxで表示させたときが(私の環境では)表示が違うんです。

IEは
■ ■

Opera・FireFoxは

  ■

です。

どっちの挙動が正しいのでしょう?
私はIEのように表示されることを望んでいるんです。
IE、Opera、FireFoxのいずれでも、IEのように表示される書き方はありますか?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html40/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>テスト</title>
<style type="text/css">
ul.L {
   width: 40%;
   margin: 0em;
   padding-left: 5em;
   float: left;
   clear: both;
}

ul.R {
   width: 40%;
   margin: 0em;
   padding-left: 2em;
   float: right;
   clear: both;
}
</style>
</head>
<body>

<ul class="L">
<li>あああああああ</li>
<li>あああああああ</li>
<li>あああああああ</li>
<li>あああああああ</li>
<li>あああああああ</li>
</ul>

<ul class="R">
<li>あああああああ</li>
<li>あああああああ</li>
<li>あああああああ</li>
<li>あああああああ</li>
<li>あああああああ</li>
</ul>

</body>
</html>


5:[回答] xhtml? [2005/11/30 18:43 ]

左右のBOXにおいて
>clear: both;
を削除してみましたところ、IE6x、FireFoxのいずれでも、同様に表示されました、原因は不明ですが。

>clear: both;
の指定が何故必要なのかわかりません、私もXHTMLで自分のHPのリフォームをボチボチと やっていますが、CSSを使ったレイアウトで IE6x、FireFox の表示が異なっているのを調整するのに手間取っています、参考にしたいので 考え方を教えて下さいね、反対に質問することになってすみません。


6:[回答] AC1号 [2005/11/30 19:44 ]

clearプロパティの定義からして、FirefoxやOperaの表示は妥当です。逆に、IEの挙動の方がおかしい。
http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/visuren.html#flow-control
http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/visuren.html#q28

この場合は、>>5の通り、clearプロパティを削除するだけでよいはずです。

回答(必須): 状態:

お名前(必須):

URL:




[戻る]