將文字環繞在段落右下角的圖像上

Question

您好，我在段落末尾有一張圖片。 我希望此圖像位於該段落的右下角，並在其周圍加上文字。 現在，我將圖像放置在正確的位置，但是即使我浮動元素，也無法使文本環繞在文本周圍。

到目前為止，這是我的代碼：

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

 <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> 

謝謝！

Answer 1

這個問題之前已經討論過：

請參閱此stackoverflow.com問題以了解背景信息

 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小提琴

的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; bottom: 0; right: 0; 實現您想要的。 這是更新的JSFiddle： https ://jsfiddle.net/v4L677uh/1/