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>的左边缘（加上允许的{{1} }折叠至高度0，但我不知道图像的高度是否要赋予高度）。

负边距无济于事，因为我不知道任何特定视口宽度下的边距宽度。 <figure>不起作用，因为它漂浮在其容器中。

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

您能想到一种使用纯CSS而不使用JS的方法吗？

Answer 1

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

Answer 2

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

<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文件覆盖了此属性。

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

2 个答案: