Coding Architecture

商品写真と説明文のリストなどのための CSS | ヨモツネットを参考

demo

ちょっとしたポイント

• 改行が空白スペースをコメントアウトを使ってでないようにする。
• liにdisplay:-moz-inline-box;を指定しているのでliのなかにtableをつかえない。
• display:-moz-inline-box;の影響でliが、互換モードになるので、paddingの使い方に注意が必要。
• firefox2は、liの中にdivなどをいれないとまわりこまない。

<div id="contents01">
<ul class="blockA01">
<li><div>・・・・・このdivが本当は、とりたい
<p><img src="img/img01.gif" alt="" width="100" height="100" /></p>
<p>h</p>
</div></li><!--

--><li><div>・・・・・このdivが本当は、とりたい
<p><img src="img/img01.gif" alt="" width="100" height="100" /></p>
<p>m</p>
</div></li><!--

--><li><div>・・・・・このdivが本当は、とりたい
<p><img src="img/img01.gif" alt="" width="100" height="100" /></p>
<p>n</p>
</div></li><!--

--><li><div>・・・・・このdivが本当は、とりたい
<p><img src="img/img01.gif" alt="" width="100" height="100" /></p>
<p>きんぎょのえさきんぎょきんぎょ</p>
</div></li>
</ul>
</div>


#contents01{
width:450px;
margin-bottom:10px;	
background-color:#e8ecef;
}
ul.blockA01{
width:450px;
padding:10px 0 0 0;
}

ul.blockA01 li{
vertical-align:top;
display:-moz-inline-box; /* Firefox 2 and older */
display:inline-block;
width:100px;
margin-left:10px;
margin-bottom:10px;
list-style:none;
/display:inline;
/zoom:1;
}
ul.blockA01 li > div{
width:100px;
}

jsを使う場合は、ブロックレベル要素の高さを揃えるheightLine.js[to-R]を参考