html - 用屏幕边缘对齐元素(不更改标记)

Question

给定这样的标记:

<div>
  <p>blah blah</p>
  <img src="...">
  <p>blah blah</p>
</div>

有没有一种方便的方法可以将 img 一直 float 到屏幕的右侧或左侧(这可能与屏幕的右侧或左侧边缘不同)包含的 div？)

我知道有很多方法可以做到这一点，涉及更改标记，但我有兴趣找到一种不更改(或很少更改)标记的方法。这类似于 position: fixed; right: 0 - 但保持元素在流中，并且不影响垂直定位。

Answer 1

如果您知道容器的左边距和边距，您可以使用 translateX:

body {
  margin: 0;
  padding: 0;
}
div {
  margin-left: 150px;
  padding-left: 25px;
  border: 1px solid red;
}
div img {
  transform: translateX(-175px);
  opacity: 0.75;
}

<div>
  <p>blah blah</p>
  <img src="https://dummyimage.com/600x400/000/fff">
  <p>blah blah</p>
</div>