将填充应用于超出右侧窗口的元素答案

【问题标题】：Apply padding to elements that extend beyond the window to the right将填充应用于超出右侧窗口的元素
【发布时间】：2016-10-06 20:36:58
【问题描述】：

我有一个 HTML 元素，它超出了浏览器窗口的右侧，我希望它和文档边缘之间有一些间距。

（对我而言）显而易见的方法是将padding 添加到正文中，以便文档中的所有内容周围都有一些空间。但是，这似乎不适用于超出浏览器宽度的内容。向元素添加margin-right 也不起作用。

这个jsfiddle应该很清楚地说明了这个问题：

我觉得我在这里的一些明显的东西是间距。

【问题讨论】：

【解决方案1】：

编辑：为正文添加宽度 https://jsfiddle.net/swordys/2cwhudxr/8

<p>
  Scroll that way &rarr;
</p>

<div id="wide-thing">
  I want padding on this side &rarr;
</div>

CSS

body {
  padding: 25px;
  width: 1500px;
}

#wide-thing {
  background-color: #cf0;
  height: 100px;
  width: 100%;
  text-align: right;
}

【讨论】：

好的，这确实增加了间距——尽管我希望有一种更优雅的方式来做到这一点。在我的实际项目中，宽元素是不同（和未知）宽度的图像。因此，要使用此解决方案，我需要为每个图像添加容器，并在两个不同的位置管理文档的填充。不是世界末日，但希望有更好的方法来做到这一点。
如果没有更简单的方法出现，我肯定会接受你的回答。谢谢！
@SCCOTTT 更新了答案，不需要额外的容器。
这也可以，但是当我添加不同宽度的元素时，它会迫使我更新正文，这对我正在处理的工作来说并不是很好。我想我实际上已经从这个答案中找到了一个很好的解决方案：stackoverflow.com/questions/22301513/…。这允许 body 扩展到它需要的任何宽度以适应其中的元素。
是的，这也可以。这就是为什么上下文对于您要解决的确切问题以及它应该如何影响身体的其他部分很重要。还是祝你好运！

【解决方案2】：

在这个答案中找到了一个简洁的工作解决方案：https://stackoverflow.com/a/22302368/749635

此代码允许 body 元素扩展以适应其中的任何宽元素：

body {
    float: left;
    min-width: 100%;
}

【讨论】：