0

我有一个响应式 3x3 视频缩略图网格，它使用漂亮的照片到灯箱 vimeo 剪辑。它在某些分辨率下效果很好，但是当您调整浏览器窗口的宽度时，它会迅速从 3x3 变为这种废话。
什么？

这是有问题的 CSS。

     .thumb
{
float: right;
width: 25%;
height: auto;
margin: 2%;
}
    .maincontent
{
margin:0 auto;
width:90%;
float:right;
}

如果重要的话，还有一个 HTML 片段。

        <div class="maincontent">
    <a href="http://vimeo.com/428525" rel="prettyPhoto" title="">
       <img class="thumb" src="http://ftfrmedia.com/images/thumbnails/Overview-thumb.jpg" alt="Company Overview" width="60" />
       </a>

我真的被难住了...

4

2 回答 2

2

我认为这是浮动.thumb和img.

更换浮动display: inline-block应该可以解决问题：

.thumb {
    height: auto;
    margin: 2em;
    width: 25%;
}

img {
    display: inline-block;
    *display: inline;        /* IE7 hack as it does not */
    *zoom: 1;                /* support display: inline-block */  
    height: 3em;
    margin-left: 0.5em;
    margin-right: 0.5em;
    margin-top: -1.6em;
    width: 3em;
}

更新

正如下面@DaveHaigh所指出的，不需要display: inline-block在 img 元素上使用，因为它已经接受了 height 和 width 属性。

因此，只需移除浮动即可解决此问题。如果您想保持图像从右到左的流动，那么您可以添加direction: rtl到它们的父级：

.maincontent {
    direction: rtl;
}

这样做的缺点是它也会从右到左排列任何文本，但这在您的网站中似乎不是问题，因为您没有在.maincontent元素中使用任何文本。

于 2012-05-30T12:59:49.317 回答
1

.thumb删除and上的浮动img。并且还将margin: 2em;on替换.thumb为百分比值，例如2%。

于 2012-05-30T13:04:12.637 回答