0

添付画像のレイアウトを実装しようとして失敗しました。テーブル設定 IE で適用された div が壊れた場合、キャプションが複数行であるときに要素がフローティングされると、レイアウトが再び壊れます。どんな提案でも大歓迎です。

レイアウトイメージ:

ここにCSSがあります

.thumbsHolder {clear:both;float:left;width:100%;overflow:hidden;}
.thumbsHolder ul#prodThumbs {padding-top:20px;margin:0 auto;list-style-type:none;text-align:center;}
.thumbsHolder ul#prodThumbs li {float:left;padding:0 7px;min-height:150px;}
.thumbsHolder ul#prodThumbs li a {font-family:Arial, Helvetica, sans-serif;font-weight:normal;text-decoration:none;font-size:70%;}

HTML

<div class="thumbsHolder">
<ul id="prodThumbs">
<li><a href="link1.htm"><img src="thumb1.jpg" /></a> <!-- image width and height may differ -->
<p><a href="link1.htm">Caption</a></p></li>
<li><a href="link2.htm"><img src="thumb2.jpg" /></a>
  <p><a href="link2.htm">Longer caption</a></p>
</li>
<li><a href="link3.htm"><img src="thumb3.jpg" /></a>
  <p><a href="link3.htm">Even longer caption</a></p>
</li>
<li><a href="link4.htm"><img src="thumb4.jpg" /></a>
  <p><a href="link4.htm">Longer caption</a></p>
</li>
<li><a href="link5.htm"><img src="thumb5.jpg" /></a>
  <p><a href="link5.htm">Caption this time is a sentence that goes three rows</a></p>
</li>
<li><a href="link6.htm"><img src="thumb6.jpg" /></a>
  <p><a href="link6.htm">Caption this time is a sentence that goes three rows</a></p>
</li>
<li><a href="link7.htm"><img src="thumb7.jpg" /></a>
  <p><a href="link7.htm">Caption this time is a sentence that goes three rows</a></p>
</li>
<li><a href="link8.htm"><img src="thumb8.jpg" /></a>
  <p><a href="link8.htm">Caption this time is a sentence that goes three rows</a></p>
</li>
<li><a href="link9.htm"><img src="thumb9.jpg" /></a>
  <p><a href="link9.htm">Since we have a wider image at first row, this row must be centered</a></p>
</li>
<li><a href="link10.htm"><img src="thumb10.jpg" /></a>
  <p><a href="link10.htm">Longer caption</a></p>
</li>
<li><a href="link11.htm"><img src="thumb11.jpg" /></a>
  <p><a href="link11.htm">Here text also goes down, so if we float layout breaks</a></p>
</li>
<li><a href="link12.htm"><img src="thumb12.jpg" /></a>
  <p><a href="link12.htm">Caption</a></p>
</li>
<li><a href="link13.htm"><img src="thumb13.jpg" /></a>
  <p><a href="link13.htm">Longer caption</a></p>
</li>
<li><a href="link14.htm"><img src="thumb14.jpg" /></a>
  <p><a href="link14.htm">This is a centered image</a></p>
</li>
<li><a href="link15.htm"><img src="thumb15.jpg" /></a>
  <p><a href="link15.htm">This is out last image</a></p>
</li>
</ul>
</div>
4

1 に答える 1

0

サイトで生成されたときのサムネイルの最大サイズを知っておく必要があります。何らかの制限があるはずです。div の高さをサムネイルの最大値にする div セットにタグをラップしてみませんか。次に、div に img を配置します。次に、キャプション用の p タグを以下に示します

于 2011-10-05T06:07:20.133 に答える