Question

我目前正在尝试为我的网站制作新设计。我到了这一点，但我找不到如何删除图片右侧的空白区域（向右滑动网页，你看到它，一个巨大的空白区域）。

这是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

你看到＆＃34; white＆＃34;右侧的空格是您应用于#conteudo元素的CSS。

这是元素的css：

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

有多种方法可以解决这个问题。一种方法是删除margin属性或将宽度更改为低于100vw的值。你正在做的是说元素应该与浏览器窗口一样宽（窗口宽度的100％），然后还说在宽度之外它应该有更多的边距（在你的情况下是15px在右边，260px在左边）），这就是＆＃34;拉伸页面＆＃34;，导致总的宽度大于窗口宽度。

Answer 2

将Eric Meyers resets添加到css文件的顶部。它会删除浏览器自动包含的所有样式，例如边距和填充。它似乎很多，而且大部分都将不会使用，但它的好处是为了以防万一。

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

JSFiddle - 网站空白隐藏空间

2 个答案: