使用 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_____|_____     
|                             |
|                             |     
|                             |     
|_____________________________|     
      |                 |
      |                 |
      |                 |
      |_________________|

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

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

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

你能想出一种不用 JS 的纯 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，以便它可以将列移到左侧站点。因为有 margin auto 它试图在中心对齐。

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

Answer 2

基于 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;
}

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

Move element to right margin without removing from HTML flow with CSS

html

css

position