使用CSS将元素移动到右边距，而不从HTML流中删除

我在页面中央有一个固定宽度的列。由于视口不同，因此边距未知。我想将它移动到屏幕的左边缘，而不从HTML流中删除它

<main class="centered" style="width:750px;margin-left:auto;margin-right:auto">
...
  <figure class="imagefullwidth" style="width:100vw">
    <img src="image.jpg">
  </figure>
...
</main>

当然，我尝试了

位置：绝对；左：0

在

上，但这将它从HTML流中删除。我尝试了

位置：绝对left:0

只将图像放在

的左边缘（加上这允许

折叠到高度0，我不知道图像的高度来给它一个高度）

负边距没有帮助，因为我不知道在任何特定视口宽度下边距的宽度<代码>浮动：left不起作用，因为它在其容器中浮动

---

我不能修改HTML，因为它来自CMS。但是有很多包装纸和我可以设计的东西

你能想出一种方法来使用纯CSS而不使用JS吗

---

我不知道您为什么要这样做，但是如果您想将一列移动到左侧，您可以执行类似的操作

<main class="centered" style="width:750px;margin-left:0;margin-right:auto">

  <div class="imagefullwidth" style="width:100vw">
    <img src="image.jpg">
  </div>

</main>

在这里，您正在第一行中进行更改

 <main class="centered" style="width:750px;margin-left:0;margin-right:auto">

其中左边距为0，以便可以将列移动到左侧站点。因为有自动边距，它会尝试在中心对齐

---

正如你所说，这个代码来自CMS。这可能不起作用，因为有一个CSS文件覆盖了此属性。

基于下面提供的html和可视化示例，CSS似乎完成了您的目标

---

请分享你的屏幕截图。@ParTha不确定这会有什么帮助，但很高兴添加它。“我不能修改HTML，因为它来自CMS。但是有很多包装器和东西我可以设计。”是的，我不能修改HTML，但我可以修改CSS，只要我喜欢（或者实际上添加更多覆盖默认CSS的CSS）。我不想将

设置为

左边距：0

，因为这样剩下的内容就不会居中或在750px的列中。我必须设置

最小宽度：100vw

才能将其从容器中取出，但是的，它起作用了。令人惊叹的。谢谢

 <main class="centered" style="width:750px;margin-left:0;margin-right:auto">

.centered {
  background-color: gray;
  width: 100% !important;
  max-width: 750px;
}

.imagefullwidth {
  width: initial !important;
}

.imagefullwidth img {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: auto !important;
}