html - 居中 div 中 float 动态元素的 CSS 边距问题

Question

我正在编写一个 Wordpress 主题，我在显示 5 个动态帖子缩略图时遇到问题(左浮动)，在居中的 div 中有 20 像素的右边距。

这是一个页面链接:http://www.lesfourchettes.net/info (当您点击顶部导航中的“Les Prèfs”时会出现此问题:顶部菜单和下方内容向左移动 10px。)

问题是:

• 该站点的宽度为 960 像素并且居中。 (#wrapper)

• 5 个动态生成的帖子缩略图的宽度为 176 像素，每个缩略图的右边距为 20 像素。 (#.prefs-thumbs)

• 我为缩略图选择了这些尺寸，我认为我会有 5 个缩略图和它们之间的 4 个边距，这样加起来就是 960 像素。

• 但实际情况是每行的最后一个缩略图也有 20 像素的边距，因此整个缩略图加起来为 980 像素(比网站宽 20 像素)。

• 我发现每行显示 5 个缩略图的唯一解决方案是为缩略图 div (#prefs) 分配 980 像素的宽度。

• 然而，这似乎引发了一个问题，即其余内容不再以 960 像素的网站宽度为中心，而是以 980 像素的缩略图 div 为中心。

• 所以每当我单击“lesprefs”以显示缩略图(使用一点 jquery 函数)时，整个内容都会移动到左侧的 10px。

整个事情解释起来有点复杂。但我觉得肯定有一个简单的 CSS 解决方案可以解决我的问题。也许与溢出属性、显示属性或类似的东西有关……我只是对 CSS 还不够好，无法确定解决方案，而且我的问题是如此具体，我还没有在网上找到答案。

我觉得问题出在这些 CSS 行中:

#wrapper {
width: 960px;
height: auto;
margin: 0 auto 0 auto;
}

#prefs {
width: 980px;
height: 390px;
margin: 69px 0 0 0;
}

.prefs-thumbs {
position: relative;
float: left;
margin: 0 20px 20px 0;
}

如有任何帮助，我们将不胜感激。干杯!

Answer 1

您注意到 10 像素的偏移是因为页面高度在增加，并且浏览器正在添加水平滚动条。

我对这个问题的首选解决方案是始终显示水平滚动条，使用以下 CSS(适用于所有现代浏览器):

html { overflow-y: scroll; }