html - Margin : auto-ed elements = to padding left of 100%-width overflow item 的左边距

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”元素；我希望其中的 IMG 元素与页面左侧的距离与 header 元素的距离相同。无论用户调整浏览器的大小如何，我都希望这是真的。

我只想用 CSS 来完成。 您可以添加新元素，但不能在“article”标签内添加。

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

Answer 1

calc()方法

这可以通过(实验性的)calc 来完成属性:

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

Demo

在这里您必须输入 <header> 的宽度(在本例中为 300px )，它将自动确定 50% - (width) / 2 是什么是。如果您更改 <header> 的样式，这不会自动更改虽然，和it is not supported in too many browsers .

margin-left和 left方法

这是一种适用于所有现代浏览器的方法:定义一个 left定位，然后负左margin :

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

Demo

这首先将元素移动到页面宽度的 50%，然后通过其负边距将其向左移动 150 像素。您必须输入 <header> 的宽度, 比如 calc()方法，但在这里你必须自己将它除以 2(应该不会太难 :P)