Question

我尝试在附加图像中实现布局失败。当表格设置为IE的apllied div时，如果元素在字幕超过一行时浮动，则布局再次被破坏。任何建议将不胜感激。！

布局图片：http://i53.tinypic.com/1zqcwf7.png

这是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>

Answer 1

您应该知道在您的网站上生成缩略图的最大尺寸，必须有一些限制。为什么不将标记包装到div组中，div组将高度除以缩略图的最大值。然后在div中对齐img。然后你的p标签下面是标题

使用没有固定图像大小的标题居中缩略图库

1 个答案: