Html 页边距的左边距：自动编辑元素=在100%宽度溢出项的左边填充

让我演示以下HTML的问题：

<section style="text-align: center;">
  <header style="margin: 0px auto; width: 300px; background: orange;">&nbsp;</header>
  <div>
    <article style="overflow-x: auto; width: 100%; background: pink;">
      <img src="http://placekitten.com/10000/10" />
    </article>
  </div>
</section>

其中的“

文章”

”元素；我希望其中的

IMG

元素与

header

元素在页面左侧的距离相同。我希望这是真实的，无论用户调整浏览器的大小有多宽

我只想用CSS来做。您可以添加新元素，但不能添加到“

文章”

”标记中

我认为这是不可能的，如果不是困难的话。我有一些想法，但你能帮我吗？

calc（）

method 这可以通过（实验）

calc

属性完成：

div article {
    margin-left: calc(50% - 300px/2);
}

在这里，您必须输入

（在本例中为

300px

）的宽度，它将自动确定

50%-（宽度）/2

是什么。但是，如果更改

的样式，则不会自动更改，并且

左边距

和

左边距

方法 这是一种适用于所有现代浏览器的方法：定义

左

定位，然后定义负左

边距

：

div article {
    position:relative;
    left: 50%;
    margin-left: -150px;
}

---

这首先将元素在页面上移动到50%的宽度，然后通过其负边距向左移动150px。您必须输入

的宽度，就像

calc（）

方法一样，但这里您必须自己将其除以2（不太难：P）

您的意思是将文章居中，使其与页眉位置相同？如果您在包含div的标题上放置相同的样式，那么它们将是相同的位置。我在回答中添加了一个额外的部分，在这里我将解释如何为每个现代浏览器执行此操作，而不是我的原始回答，其中只包含支持

calc（）

的某些浏览器的答案。你可能想看看这是不是你要找的东西；很抱歉，这不是一个选项。标题中有100%宽度的溢出项，因为此div实际上必须显示为100%宽度的div。限制溢出/滚动区域不是一个选项。@SoreThumb此问题的标题很难理解其含义。Joey的答案似乎很有效，我不需要担心移动浏览器，因为：calc答案！