人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

異なる高さの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;
}

1217909760
●拡大する


●質問者: kt26
●カテゴリ:ウェブ制作
✍キーワード:background-color BOX CSS IE6 margin
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● Mook
●35ポイント

常に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>

http://www.stylish-style.com/csstec/base/float.html

◎質問者からの返答

回答ありがとうございます。

ただ、常に2列に固定する訳ではありませんし、liの指定もボックス毎に変わると困ります。

(ブラウザの幅可変に応じて回り込みする/しない を想定しています)


2 ● nagase
●35ポイント

そういう配置にするだけならli要素ではなくてdivを使って

<html>
<head>
<style type="text/css">
<!--

.firstsecond {
 float:left;
}

.floatbox {
 float:left;
 background-color: #CCCCCC;
 padding: 10px;
 width: 100px;
 margin-left: 10px;
 margin-top: 10px;
}

-->
</style>
</head>
<body>

<div class="firstsecond">
 <div class="floatbox">異なる高さのボックス<br><br><br></div>
 <div class="floatbox">2番目のボックス</div>
</div>
<div class="floatbox">3番目のボックス</div>

</body>
</html>

このように記述すれば可能です。

marginはIEだと正常にレンダリングされないのでtopとleftに設定しました。

まだ試していませんが、li要素で目的のレイアウトにするのは無理なんじゃないかと思います。

◎質問者からの返答

この場合だと3番目のボックスが「firstsecond」から外れますよね?

そうするとhtmlの記述自体変えなければいけなくなるので、目的の方法とは違いますね。

あくまでボックスの数が増えた場合や、可変時を想定しています。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ