边距的左边边距:自动元素元素=至100％宽度溢出项目的填充物

Question

让我用以下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>

其中的' article'元素；我希望与header元素距离页面左侧的IMG元素距离距离相同。我希望这是真实的，无论用户调整浏览器的大小如何宽度。

我只想使用CSS进行。您可以添加新元素，而不是在" article"标签中。

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

Answer 1

calc()方法

这可以使用（实验） calc属性：

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

演示

在这里，您必须输入<header>的宽度（在这种情况下为300px），并且它将自动确定50% - (width) / 2是什么。如果您更改<header>的样式，则不会自动更改，并且在太多浏览器中不支持它。

margin-left和left方法

这是一种可以在每个现代浏览器中起作用的方法：定义left定位，然后是负左margin：

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

演示

这首先将元素移至页面上的宽度50％，然后通过其负边缘向左移动150px。您将必须像calc()方法一样输入<header>的宽度，但是在这里您必须将其除以2（不应该太难：P）