Question

您好，我在段落末尾有一张图片。我希望这个图像位于段落的右下角和文本环绕它。现在我将图像放在正确的位置，但即使我浮动元素，我也无法将文本包裹起来。

到目前为止，这是我的代码：

＆＃13;

p {
  float: left;
}

img {
  float: right;
  margin-top: -90px;
}

＆＃13;

<p>
  text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
  text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
  text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
  text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
  text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
  text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
  <img src="http://www.barebooks.com/wp-content/uploads/2013/10/GM05.gif">
</p>

＆＃13;

谢谢！

Answer 1

这个问题之前已经讨论过：

查看此stackoverflow.com question for background

function sizeSpacer(spacer) {
  spacer.style.height = 0;
  var container = spacer.parentNode;
  var img = spacer.nextElementSibling || spacer.nextSibling;
  var lastContentNode = container.children[container.children.length - 1];
  var h = Math.max(0, container.clientHeight - img.clientHeight);
  spacer.style.height = h + "px";
  while (h > 0 && img.getBoundingClientRect().bottom > lastContentNode.getBoundingClientRect().bottom) {
    spacer.style.height = --h + "px";
  }
}

onload = onresize = function() {
  sizeSpacer(document.getElementById("spacer"));
};

body {
  font-family: sans-serif;
  font-size: 12px;
}

img {
  width: calc(40% - 100px);
  float: right;
  clear: right;
}

#spacer {
  width: 0px;
  float: right;
}

<div class="container">
  <div id="spacer"></div>
  <img src="http://placehold.it/300x300" />
  <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
    text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
    text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
    text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
    text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
    text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
    text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
    text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text texttext text text text text text text text text text text text
    text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
    text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
    text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
    text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
    text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
    text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
    text text text text text text text text text text text text text text</p>

</div>

Answer 2

添加display:flex;，如果您希望图片为“下推”，则margin-top应该是正数而不是负数。

p {
  display:flex;
  float: left;
}

img {
  float: right;
  margin-top: 90px;
}

Answer 3

这会将图像浮动到右侧并进行文本换行。 https://codepen.io/anon/pen/xdvMLO。

<强> HTML

<p><img src="http://www.barebooks.com/wp-content/uploads/2013/10/GM05.gif" class="floater">
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text 
</p>

<强> CSS

.floater {
  float: right;
  bottom: 0;
}

Answer 4

对于仅限CSS的解决方案，我认为您需要知道p的高度，以便将其直接放在右下方。如果您知道，可以使用“推动器”div来向下推动图像。此外，浮动元素应位于包装文本之前：

JS Fiddle

CSS

.pusher {
  height: 90px;
  float: right;
}

img {
  clear: right;
  float: right;
}

HTML

<p>
  <div class="pusher"></div>
  <img src="http://www.barebooks.com/wp-content/uploads/2013/10/GM05.gif"> 
  text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
  text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
  text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
  text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
  text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
  text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
  text text
</p>

Answer 5

您可以使用position:absolute;和bottom: 0; right: 0;来实现您的目标。这是更新后的JSFiddle：https://jsfiddle.net/v4L677uh/1/

在段落右下角的图像周围包装文字

5 个答案: