異なる高さのBOXを横並びにしたいと思います。
以下のようにCSSを記述したのですが、「3番目のボックス」が「異なる高さのボックス」の下に来ずに、2番目のボックスに来ます。
どのような記述をすればよいのでしょうか？
※確認はFirefox3.0とIE6で行っています。
※高さは可変することを想定しています。
#listBox ul{
width: 300px;//実際の利用では横幅を固定しない
}
#listBox li{
display: block;
float: left;
background-color: #CCCCCC;
padding: 10px;
width: 100px;
list-style-type: none;
margin-right: 10px;
margin-bottom: 10px;
}
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。
ログインして回答する
みんなの回答
-
Mook
満足35pt
常に2列に配したいのであれば、下記のようでどうでしょうか。
<html> <head> <style type="text/css"> <!--- UL#listBox { width: 300px;//実際の利用では横幅を固定しない } LI#listBox { display: block; float: left; background-color: #CCCCCC; padding: 10px; width: 100px; list-style-type: none; margin-right: 10px; margin-bottom: 10px; } LI#listBoxc { display: block; clear:both; background-color: #FFCC00; padding: 10px; width: 100px; list-style-type: none; margin-right: 10px; margin-bottom: 10px; } ---> </style> </head> <body> <div> <ul id="listbox"> <li id="listBox">異なる高さのボックス<BR><BR><BR><BR></li> <li id="listBox">2番目のボックス</li> <li id="listBoxc">3番目のボックス</li> </ul> </div> </body> </html>
-
kt26
-
- その他の回答を読む
kt26
この質問へのコメント
質問の情報
- 登録日時
- 2008-08-05 13:16:01
- 終了日時
- 2008-08-06 11:08:10
- 回答条件
- 1人2回まで
この質問のカテゴリ
この質問に含まれるキーワード
人気の質問
-
１０年前に購入した３万円のPCが遂に壊れました。 長持ちした方でしょうか？ …
coccinellab
2
1
-
買取アプリ「cashari」についてです cashariでリースバックした商品（ゲーム等）を仮にリース期間中に売る…
匿名質問者1
11
-
今2023年ですがこの今の日本の条件下で少子高齢化を解決するとしたら何か良い案がありますか?政策を実施す…
寺本まこと221
-
ホルモンですが、効果を発揮した後は、別のものに変化してしまうんでしょうか。セロトニンは心を落ち着かせ…匿名質問者
-
iPhoneを適当なキャリアで複数契約させた後SIMカードを抜き、本体のみ業者に送り買取といった内容の資金調…匿名質問者1
ということですと、高さをある程度揃えないと実現は難しいように思いますがどうなんでしょうね。
一応置いておきます。
つ【ブロックレベル要素の高さを揃えるjavascript｜http://blog.webcreativepark.net/2007/07/26-010338.html】
リンク先参考にさせていただきます。
高さが不揃いだとお望みの事は出来ないです。
全てを、ある程度の高さに揃える（min-height）事も無理そうですか？
ですが、CSSだけでは無理だと言うことですので、それで納得します。
利用にはPHPと併用して対処したいと思います。