JSFiddle

Question

我目前正在尝试为我的网站进行新设计。说到这里，就是找不到怎么去掉图片右边的空白space（把网页往右滑就看到了，一大片空白space）。

这是 JSFiddle：https://jsfiddle.net/yscu95hb/1/

这是我认为必须更改的部分代码。

#conteudo {
    top: 15px;
    position: absolute;
    margin: 0px 15px 0px 260px;
}

.images {
    margin: auto;
    position: relative;
    width: calc(100vw - 260px);
    align-content: center;
}

.images img {
    max-height: calc(100vh - 35px);
    max-width: 100%;
    position: absolute;
    z-index: 990;
}

谁能帮帮我？谢谢。

-- 编辑--

我已经发布了显示图像的代码，但我无法使其居中。有什么建议吗？

Answer 1

将 Eric Meyers resets 添加到 css 文件的顶部。它删除了浏览器自动包含的所有样式，例如边距和填充。看起来很多，而且大部分都不会被使用，但为了以防万一，还是把它全部都带上吧。

最好在每个网页的开头设置一组重置，根据我的经验，这是最好的。

Answer 2

您在右侧看到 "white" space 的原因是 css 您正在应用于 #conteudo 元素。

这是您的 css 元素：

#conteudo {
    top: 15px;
    position: absolute;
    margin: 0px 15px 0px 260px;
    width: 100vw;
}

有多种方法可以解决这个问题。一种方法是删除边距属性或将宽度更改为低于 100vw 的值。你在做什么是说元素应该与浏览器 window 一样宽（window 宽度的 100%）然后还说在那个宽度之外它应该有更多的边距（在你的例子中是 15px右边260px），也就是"streching the page"，导致总宽度大于window宽度。

JSFiddle - 网站空白隐藏 space

JSFiddle - Website blank hidden space

html

css

image

web