Fatal编程技术网
  • html/
  • Html 3x3网格在某些宽度下表现奇怪

Html 3x3网格在某些宽度下表现奇怪

html css

Html 3x3网格在某些宽度下表现奇怪,html,css,css-float,Html,Css,Css Float,我有一个反应灵敏的3x3视频缩略图网格，使用漂亮的照片到lightbox vimeo剪辑。它在某些分辨率下工作得很好，但当你调整浏览器窗口的宽度时，它会从3x3迅速变为这种胡说八道。 这就是令人讨厌的CSS .thumb { float: right; width: 25%; height: auto; margin: 2%; } .maincontent { margin:0 auto; width:90%; float:right; } 如果有必要的话，还有一段HTML

我有一个反应灵敏的3x3视频缩略图网格，使用漂亮的照片到lightbox 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
中的浮动问题

用
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所指出的，不需要在img元素上使用
display:inline block
，因为这已经接受了height和width属性

因此，只需移除浮动即可解决此问题。如果要保持图像从右向左的流动，则可以将
方向：rtl
添加到其父图像：

.maincontent {
    direction: rtl;
}
这样做的缺点是，它也会将任何文本从右向左流动，但这在您的网站中似乎不是问题，因为您没有在
.maincontent
元素中使用任何文本。

我认为这是
.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所指出的，不需要在img元素上使用
display:inline block
，因为这已经接受了height和width属性

因此，只需移除浮动即可解决此问题。如果要保持图像从右向左的流动，则可以将
方向：rtl
添加到其父图像：

.maincontent {
    direction: rtl;
}
这样做的缺点是，它也会将任何文本从右向左流动，但这在您的网站中似乎不是问题，因为您没有在
.maincontent
元素中使用任何文本。

删除
.thumb
和
img
上的浮动。并替换
边距：2em.thumb
上使用百分比值进行编码，例如
2%
移除
.thumb
和
img
上的浮动。并替换
边距：2em.thumb
上添加一个百分比值，例如
2%

可能需要更多的HTML和CSS。也许是行为不端页面的链接？看看。可能需要更多的HTML和CSS。也许是行为不端页面的链接？看一看，加上一些特威克，效果不错。非常感谢。但毫不奇怪，它不再站在正确的一边。什么是在不再次破坏图像的情况下将其放回的最佳方法？为什么需要在图像中添加
display:inline block
？@MobyD您可以重新排列图片，也可以添加
direction:rtl
到
.maincontent
-但这会导致任何书面文本也从右向左流动。我认为默认情况下图像元素是
内联块
，因此设置此选项是多余的。@MobyD我添加了一个解决方案，将maincontent容器定位回右侧，作为对我自己答案的注释。即，和一些特威克人一起工作。非常感谢。但毫不奇怪，它不再站在正确的一边。什么是在不再次破坏图像的情况下将其放回的最佳方法？为什么需要在图像中添加
display:inline block
？@MobyD您可以重新排列图片，也可以添加
direction:rtl
到
.maincontent
-但这会导致任何书面文本也从右向左流动。我认为默认情况下图像元素是
内联块
，因此设置这是多余的。@MobyD我添加了一个解决方案，将maincontent容器定位回右侧，作为对我自己答案的注释。定位将容器移回右侧，您可以从
.maincintent
中删除
浮动：right
，并向其添加一个左边距，例如
边距：0.20%
要将容器放回右侧，您可以从
.maincintent
中删除
浮动：right
，并在其上添加一个左边距，例如
边距：0.20%