Question

给出这样的标记：

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

是否有方便的方法将img一直浮动到屏幕的右侧或左侧（可能与包含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>

使用屏幕边缘对齐元素（不更改标记）

1 个答案: