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

回答の条件
  • 1人2回まで
  • 登録:2008/08/05 13:16:01
  • 終了:2008/08/06 11:08:10

回答(2件)

id:Mook No.1

Mook回答回数1312ベストアンサー獲得回数3912008/08/05 14:05:48

ポイント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>

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

id:kt26

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

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

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

2008/08/05 15:14:47
id:m_nagase No.2

nagase回答回数58ベストアンサー獲得回数82008/08/05 17:31:05

ポイント35pt

そういう配置にするだけなら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要素で目的のレイアウトにするのは無理なんじゃないかと思います。

id:kt26

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

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

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

2008/08/06 11:04:23
  • id:nyambe
    >常に2列に固定する訳ではありませんし、liの指定もボックス毎に変わると困ります。

    ということですと、高さをある程度揃えないと実現は難しいように思いますがどうなんでしょうね。
    一応置いておきます。
    つ【ブロックレベル要素の高さを揃えるjavascript|http://blog.webcreativepark.net/2007/07/26-010338.html】
  • id:kt26
    コメントありがとうございます。私も自身で調べて難しいと思い、他の方の意見を聞きたくて質問しました。
    リンク先参考にさせていただきます。
  • id:kn1967
    html側での変更が出来ないため css側 で何とか出来ないかというような話だと推測してますが
    高さが不揃いだとお望みの事は出来ないです。
    全てを、ある程度の高さに揃える(min-height)事も無理そうですか?
  • id:kt26
    全てを同じ高さにすると内容が少ない物は下にスペースが空き、見た目が良くないです。
    ですが、CSSだけでは無理だと言うことですので、それで納得します。
    利用にはPHPと併用して対処したいと思います。
  • id:m_nagase
    boxが増えても再帰的にdivで囲めばいいのだけど、htmlの記述が変えられないならしょうがないですね。li要素でいろいろやってみましたが、cssだけでは無理のようです。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません