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

Question

我在页面上居中固定宽度的列。由于视口不同，因此边距未知。我想将其移到屏幕的左边缘而不将其从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>

应该看起来像：

       _______main_______
      |                 |
      |                 |
 _____|______figure_____|_____     
|                             |
|                             |     
|                             |     
|_____________________________|     
      |                 |
      |                 |
      |                 |
      |_________________|

当然，我在position: absolute; left: 0上尝试了<figure>，但这使它脱离了HTML流程。我在图像上尝试了position: absolute;，尽管我可以创建比其容器更大的图像，但是left:0仅将图像放在<main>的左边缘（加上允许<figure>折叠到高度0的位置，不知道图像的高度以使其具有高度）。

负边距没有帮助，因为我不知道任何特定视口宽度下的边距宽度。 float: left不起作用，因为它漂浮在其容器中。

我无法修改HTML，因为它来自CMS。但是我可以样式化很多包装器和东西。

您能想到一种没有CSS的使用纯CSS的方法吗？

Answer 1

我不知道为什么要这样做，但是如果您想将列移到左侧，则可以执行以下操作。

<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，因此它可以将列移到左侧site。因为具有自动边距功能，它会尝试在中心对齐。

正如您所说的，此代码来自CMS。可能这将无法正常工作，因为会有一个CSS文件覆盖了此属性。

Answer 2

这可能会帮助您...试试这个

.centered{
    width: 750px;
    height: 100vh;
    margin: 0 auto;
    background: #949191;
}

figure{
    width: 80%;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

figure img{
    width: 100%;
    height: 400px;
    object-fit: cover;
}

Answer 3

基于提供的html和可视示例，以下CSS似乎可以完成您所追求的目标。 JSFiddle example

.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;
}