css - 菜单不随站点缩放，在较小的显示器上，视频/照片偏向右侧

Question

我早些时候寻求帮助，这太棒了，我很感激，但我需要你们的专家帮助。

http://www.mrandmrsmagic.com是我正在处理的网站，在简化代码并且没有绝对定位之后，由于某些奇怪的原因，菜单栏没有随网站缩放。推荐标签也被切断了，我猜这是由于宽度不够长？

此外，在较小的显示器(15 英寸以上)上，他们说视频库和照片库向右偏移了三英寸，有什么方法可以添加填充或边距以使它们粘在中间就像他们用更大的屏幕一样？我们将不胜感激。

Answer 1

好的...

您的图库位于已指定位置的 div 中。

例如

#gallery {
    position: relative;
    left: 950px; /* This needs to be removed */
    top: -560px; /* This needs to be removed */
}

这将始终迫使 div 移到一边。

我认为你想要的是两列，如果我错了请纠正我。

这实际上很容易做到，我已经设置了一个示例 here让你继续。

在我的示例中，两列向左和向右浮动以在中间留出空间，并且类 .placeholder 的两个 div 提供高度和宽度。

如果您创建类似的内容，分别用您的图像和画廊替换每个 .placeholder，那么您应该能够将视频保留在主要内容中。

希望这对您有所帮助。

编辑

我会尽力正确解释一切。

我链接的示例中的内容 div 只是用来环绕该示例中的 float 列。您不需要复制它。

列左右浮动以分隔内容并将其并排放置。添加 float 仅意味着它们将在其父容器内尽可能向给定方向定位。

float 内容会打断页面的流动，因此父级需要添加类 .clearfix 以防止列下方的任何内容被打乱。它还允许父级具有高度。

针对不同的显示器宽度以不同的方式定位图库仅适用于能够理解 css 中的媒体 block 的浏览器，而 ie7 和 ie8 则不能。使用两列布局会好得多。