我有一个响应式 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>
我真的很难过...
最佳答案
我认为这是 .thumb
和 img
中的 float 问题。
用 display: inline-block
替换 float 应该可以解决问题:
.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 所指出的,没有必要在 img 元素上使用 display: inline-block
,因为它已经接受了高度和宽度属性。
因此,只需删除 float 即可解决此问题。如果您想保持图像从右到左的流动,那么您可以将 direction: rtl
添加到它们的父级:
.maincontent {
direction: rtl;
}
这样做的缺点是它还会使任何文本从右向左流动,但这在您的网站中似乎不是问题,因为您没有在 .maincontent
中使用任何文本元素。
关于html - 3x3 网格在特定宽度下表现奇怪,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10816596/