CSS li float 2列組み

写真とテキストの入った<div>をliでfloat:left指定して
■■
■■
■■
のように2列に表示させました。

<li>
<div>
写真とテキスト
</div>
</li>
これを繰り返す

ただテキストの量によって
■■
　■
■　
　■
のように崩れてしまうことが分かりました。
何か良い方法はないでしょうか？
よろしくお願い致します。

No.4 ベストアンサー 回答者： abril 回答日時： 2008/03/18 20:50

質問者様のイメージに完全には合わないかもしれませんが、妥協案が2つあります。

下記サンプルはwidth: 500pxの領域に、左から一定の位置に上揃えで2アイテムづつ画像＋テキストのブロックを並べる、という想定です。
検証環境はIE6/7、Firefox2.0～、Opera9.25 on Windows XPのみです。

ただし、どちらの場合も質問者様のコメントにありました背景画像でボトム合わせにしたライン、というのを上記4環境で完全に同じ結果を得ることはhackを使ってもできませんでした。
【妥協案A】では下記CSSサンプル中の<li>に対するbackgroundプロパティを：
---------------------------------------------------------------------
background: url(../images/line.gif) repeat-x bottom left;
---------------------------------------------------------------------
と定義すれば、IE6/7を除く他環境では下揃えでFIXしてくれているのですが、IE6/7ではスクロールバーが発生した場合は下がりきった位置でないと表示しません。で、IE6はアンダースコア・ハックで
---------------------------------------------------------------------
_background-attachment: fixed;
---------------------------------------------------------------------
を追加すれば固定位置に表示されるのですが、IE7はこれを適用すると逆に背景が表示されなくなりますので、結果、IE7ではこのレイアウトを実現するのは無理でした。
ですので、ラインを画像ではなくborderプロパティを使って引く、という仕様にサンプル中では変更しています。

---------------------------------------------------------------------
【妥協案A】overflowでスクロールバーが出てもよい
---------------------------------------------------------------------
【HTMLサンプル】
---------------------------------------------------------------------
<ul class="sample">
<li>
<img src="./images/img_a.gif" alt="画像" width="150" height="17">
<p>テキストテキストテキストテキストテキストテキスト</p>
</li>
<li>
<img src="./images/img_b.gif" alt="画像" width="150" height="17">
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</li>
<li>
<img src="./images/img_c.gif" alt="画像" width="150" height="17">
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</li>
<li>
<img src="./images/img_d.gif" alt="画像" width="150" height="17">
<p>テキストテキストテキストテキスト</p>
</li>
</ul>
---------------------------------------------------------------------
【CSSサンプル】
---------------------------------------------------------------------
ul.sample {
display: inline-block;
width: 500px;（親要素で幅が決まっていれば特に定義不要）
list-style: none;
padding: 0;
margin: 0;
}
ul.sample:after {
content: "";
display: block;
clear: both;
}
ul.sample li {
width: 240px;（500pxを2等分したものから更に右マージン10pxを引いた値）
height: 60px;（これは適当なので、適切な値を定義）
float: left;
overflow: auto;
border-bottom: solid 1px #000000;
padding: 0;
margin: 10px 10px 10px 0;（上下マージンの値はお好みで）
}
ul.sample li img,
ul.sample li p {
margin-right: 20px;（overflowでスクロールバーが出た時に中のデータの右端がスクロールバーに隠れてしまうのを防ぐ為の余裕）
}
---------------------------------------------------------------------
メリット：テキスト量やフォントサイズの変更に左右されることなく、固定値の高さを保ったままアイテムを均一に並べて行くことが可能。中に入るデータ量を気にせず、どのアイテムにも同じマークアップとクラスが適用される為、アイテムの増減があってもメンテナンスが楽。
デメリット：スクロールバーが発生するアイテムの場合、一瞥で全体を見ることができない。

---------------------------------------------------------------------
【妥協案B】スクロールバーを出さず、アイテム全体を見せたい。
---------------------------------------------------------------------
【HTMLサンプル】
---------------------------------------------------------------------
<ul class="sample first-row">
<li>
<img src="./images/img_a.gif" alt="画像" width="150" height="17">
<p>テキストテキストテキストテキストテキストテキスト</p>
</li>
<li>
<img src="./images/img_b.gif" alt="画像" width="150" height="17">
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</li>
</ul>

<ul class="sample">
<li>
<img src="./images/img_c.gif" alt="画像" width="150" height="17">
<p>テキストテキストテキストテキストテキストテキスト</p>
</li>
<li>
<img src="./images/img_d.gif" alt="画像" width="150" height="17">
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</li>
</ul>

<ul class="sample">
<li>
<img src="./images/img_c.gif" alt="画像" width="150" height="17">
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</li>
<li>
<img src="./images/img_d.gif" alt="画像" width="150" height="17">
<p>テキストテキストテキスト</p>
</li>
</ul>
---------------------------------------------------------------------
【CSSサンプル】
---------------------------------------------------------------------
ul.sample {
（【妥協案Aと同じ】）
}
ul.sample:after {
（【妥協案Aと同じ】）
}
ul.another li {
width: 200px;
float: left;
padding: 10px 0 0 0;
margin: 10px 10px 10px 0;
border-top: solid 1px #000000;
}
ul.another li img,
ul.another li p {
（【妥協案Aと同じ】）
}
ul.first-row li {
border-top: none;
margin-bottom: 0;
}
---------------------------------------------------------------------
メリット：アイテム全体が表示される。
デメリット：アイテムのデータ量によって、下の余白はまちまちとなる。2アイテムづつ上揃えにするには、2アイテム毎に<ul>～</ul>でマークアップしなければならない。ボーダー位置を揃えて見せる為に、border-bottomではなくborder-topで指定している為、最初の列には常に別のクラスも併合しておかなければならず、最後の列はボーダーを付けられない。

この回答へのお礼

丁寧にご提案いただきありがとうございます！
ご提案頂いたようにこの件は妥協しようと思っています。

まずスクロールさせる案ですが、私はスクロールは少し抵抗があるのと
これは内容的に合わないので今回は使用しないですが
B案は一番理想に近いと思うので使わせて頂こうと思います。

デメリットで書いてらっしゃる通りボーダーの処理が必要で、今回は
ulにボーダーbottomを付けることにしました。
（テストしてうまくいきました。）

本当にありがとうございました！
感謝致します。

お礼日時：2008/03/18 23:01

No.5 回答者： leap_day 回答日時： 2008/03/18 21:16

こんにちは

え～～と、お伝えしたかったのはそういうことではなくておそらく大外の枠のwidthのみ設定して(#2で言うところの<ul style="width:800px">)、float解除することなくfloat:left;した<li>を並べたものにしているのでしょうから左右の<li>の高さが異なると(#2で言うところのheight:51px;、height:50px;）（←これは<div>で生成されてる高さを表しています）
左の高さが右の高さより多いと必然的に
■■
　　■
の状態になるということです

なので左右の高さを揃えるか、clear:both;によってfloat解除する方法を提示しました

#2下側のサンプルで解決したというお声がかからないということは・・・
＞背景画像で下記のようにラインも入れてありますし
このライン画像も同じ位置にしたいのでしょうか？
HTMLでは無理（やろうと思えばできると思いますが）なのでjavascriptを使用することになります

『haightLine.js』
http://blog.webcreativepark.net/2007/07/26-01033 …
↑ここから取得してください

<script type="text/javascript" src="./heightLine.js"></script>
<style type="text/css"><!--
li {
width:400px;
float:left;
background-image:url("****.gif");
background-position:bottom;
background-repeat:no-repeat;
}
.left {
clear:both;
}
--></style>


<ul style="width:800px;margin:0px;padding:0px;list-style:none;">
<li class="heightLine-group1" style="background-color:red;">aa<br>ee</li>
<li class="heightLine-group1" style="background-color:blue;">bb</li>
<li class="heightLine-group2,left" style="background-color:yellow;">cc</li>
<li class="heightLine-group2" style="background-color:green;">dd<br>ff<br>gg</li>
</ul>
<div style="clear:both;"></div>

※サンプルですのでとりあえず<li>につけてますが質問の流れ的には<div>の方に画像は配置されてるでしょうから<li>ではなく<div>の方にclass="heightLine-group*"指定してください

※3番目の<li>についているclass="left"はjavascript off用のものですがjavascript offの時には左右の位置関係は変わりませんが上下のレイアウトは崩れます


一番いいのは2つずつ<ul>で結んで<li><div>にheight指定（左、右の高い方のheightで指定)しておいて
＞文字サイズを変更できるようにしてあったので
　↑javascript使用（？）の中で<li><div>のheightも同じ倍率掛けてやればできると思います

この回答へのお礼

お返事頂きありがとうございます！
おっしゃる通りです。
高さを揃えたい理由はラインの位置も揃えたいからだったんです。

javascriptを使って揃える方法
これはいいですね。
今使うかは悩み中ですが（他のjavascriptの使用とを考えて）方法があるにはあるんですね。今後使えそうです。
ありがとうございます。
取り急ぎお礼まで。

お礼日時：2008/03/18 23:26

No.3 回答者： SAYKA 回答日時： 2008/03/18 01:38

>li{

ん？divの指定は無いんだね
divは描画機構によってはliを無視した位置で描画されてliからはみ出るよ。
それが原因じゃない？
li側でoverflowを書いておくか内側のdivもwidthで制限したら治らない？

この回答へのお礼

widthはいれてあったので高さ指定とoverflow入れてみたんですが、
文字サイズを変更できるようにしてあったので、文字サイズ大にすると結局ダメでした。
やっぱりちょっと無理がありますよね。

お礼日時：2008/03/18 17:42

No.2 回答者： leap_day 回答日時： 2008/03/17 20:26

こんにちは

いまいちピンとこないですが・・・

■１つで<li>を表していて width:400px; 中に画像とテキストがあるということですよね？

heightはどうなっていますか？
左右2つのheightが揃っていないとそういった現象は確認できますが・・・

(例)※違いが分かるようにそれぞれにstyle指定してます
<ul style="width:800px;margin:0px;padding:0px;list-style:none;">
<li style="width:400px;height:51px;float:left;background-color:red;">aa</li>
<li style="width:400px;height:50px;float:left;background-color:blue;">bb</li>
<li style="width:400px;height:50px;float:left;background-color:yellow;">cc</li>
<li style="width:400px;height:50px;float:left;background-color:green;">dd</li>
</ul>
<div style="clear:both;"></div>

なので左右のheightを揃えるか

右と左でclass分けするなどして左のCSSにclear:both;を入れてください
(例)
<style type="text/css"><!--
li {
width:400px;
float:left;
}
.left {
clear:both;
}
--></style>


<ul style="width:800px;margin:0px;padding:0px;list-style:none;">
<li style="height:51px;background-color:red;">aa</li>
<li style="height:50px;background-color:blue;">bb</li>
<li style="height:50px;background-color:yellow;" class="left">cc</li>
<li style="height:50px;background-color:green;">dd</li>
</ul>
<div style="clear:both;"></div>

・・・position:relative;している意味は何でしょうか?

この回答へのお礼

heightは指定していません。widthのみ指定しています。本当は高さを指定すれば解決するのですが。テキストの量が確定ではない以上、
背景画像で下記のようにラインも入れてありますし、

background-repeat:repeat-x;
background-position:bottom;

liに高さの想定最大値を指定すると、ものによってはテキストの下ががら空きになってしまいます。

position:relative;　はたぶん間違いだと思います。
すいません。まだ未熟なもので。

きっと上手いやり方があるのだと思うのですが・・・

お礼日時：2008/03/17 21:41

No.1 回答者： SAYKA 回答日時： 2008/03/17 14:06

横幅を固定したら良いんじゃない？

widthで。

この回答へのお礼

横幅は指定しているので左側に１つだけ表示はないですね、すいません。正しくは
■■
　■
■■
■■
　■
■
のように右側に配置されたdivのテキストが少ないとその下（右側）に次が配置されてしまうということです。

li{
width:400px;
float:left;
margin:10px 0px;
position:relative;
list-style:none;
text-align:left;
}

お礼日時：2008/03/17 15:29