Question

我正在编写一个Wordpress主题，我遇到一个问题，显示5个动态的帖子缩略图彼此相邻（左浮动），在居中的div中有20px的右边距。

这是指向页面的链接：http://www.lesfourchettes.net/info（当您点击顶部导航栏中的“LesPrèfs”时会出现问题：顶部菜单和下面的内容向左移动10px。）

问题在于：

网站的宽度为960像素，居中。（#wrapper指定）
5个动态生成的后缩略图为176px宽，每个右边距为20px。（＃.prefs-大拇指）
我为缩略图选择这些尺寸，以为我会在它们之间有5个缩略图和4个边距，最多可以增加960px。
但实际情况是每行的最后一个缩略图也有20px的边距，因此整个事物总计增加到980px（比网站宽20px）。
我发现每行显示5个缩略图的唯一解决方案是为缩略图div（#prefs）分配980px的宽度。
然而，这似乎引发了其他内容的居中问题，这些内容不再以960px网站宽度为中心，而是宽度为980px缩略图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

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

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

html { overflow-y: scroll; }

Answer 2

由于页面右侧出现垂直滚动，我看到居中对齐方向向左移动。

Answer 3

首先要解决的是块中元素的实际拟合。

您需要从每行的最后一个元素中删除右边距..

因此，要么将一个类设置为覆盖marign-right:0或（ for modern browsers ）的边距的最后一个项，请使用

纯粹在CSS中完成

.prefs-thumbs:nth-child(5n+1){
    margin-right:0;
}

参考：http://www.w3.org/TR/selectors/#nth-child-pseudo

您还需要从添加的图像中删除边框，而不是176个像素，每个图像占用180个像素（它周围有2个像素边框）

所以，先纠正你的数学......

移动内容的问题是，一旦内容超出页面高度（按预期），滚动条就会出现。一种解决方案是保持垂直滚动条可见，正如@wsanville在他的回答中所暗示的那样。

在中心div中浮动动态元素的CSS边距问题

3 个答案: