如何在右下方的文本中包装文本？

Question

每当我尝试在CSS中做一些看似简单的事情时,它都行不通.

我有一个包含460x160图像的内容div.我想要做的就是将图像放在右下角并将文本环绕在它周围.

<div id="contents">
    <img src="..." />
    text text text text text text ...
</div>

所以我希望它看起来像:

------------------
| text text text |
| text text text |
| text text -----|
| text text |    |
------------------

使用左上角或右上角图像进行操作是蛋糕:

#contents img { float:right; }

------------------
| text text |    |
| text text -----|
| text text text |
| text text text |
------------------

现在我该怎么把它推到底部？到目前为止,我提出的最好的是:

#contents img { float:right; margin-top: 90%} // really needs to be 100%-160px

------------------
| text text      |
| text text      |
| text text -----|
| text text |    |
------------------

在这种情况下,文本不会在边距中打印,因此图像上方有空白区域.

#contents { position:relative; }
#contents img { position:absolute; right:0; bottom:0; }

-or-

// move the img tag under the text in the html and:
#contents img { float:right; margin-top:-160; }

------------------
| text text text |
| text text text |
| text text -----|
| text text | te |
------------------

在这种情况下,文本打印在图像上方或下方.

那么......我怎么能做到这一点？

Answer 1

在(2003年),之前(2002年)或之前(2005年)似乎确实有人问过这个问题.

最后一个链接实际上建议使用基于javascript的解决方案,但对于固定(即非流动)解决方案.

然而,它与其他建议一致

唯一的方法是将浮动元素放在文本中间的某个位置.在所有的时间里都不可能完美.

或者这一个:

它包括浮动一个垂直的"推动器"元素(例如img,但它可能更聪明,只使用一个空div),然后使用clear属性浮动其下的所需对象.这种方法的主要问题是你仍然需要知道文本有多少行.它使事情变得更容易,并且绝对可以使用javascript编码,只需要将"推动器"的高度更改为容器的高度减去浮动的高度(假设您的容器未固定/最小高度) .

无论如何,正如本主题所讨论的,没有简单的解决方案......

Cletus在2003年的这篇评论中提到了这一点,它再次说明了它不容易实现的事实.
但是,它确实引用了这篇Eric Meyer的文章,这篇文章接近你想要实现的效果.

通过了解浮动和正常流如何相互关联,并了解如何使用清除来操纵浮动周围的正常流,作者可以使用浮动作为一个非常强大的布局工具.
因为浮动最初并不打算用于布局,所以可能需要一些黑客来使它们按预期运行.这可能涉及包含浮点数,"清除"元素或两者的组合的浮动元素.

然而,查德威克梅耶在暗示他的回答基于该解决方案 :beforeCSS选择器(变化伦纳德的答案).
它在这里工作.

Answer 2

嗯......这是一个非常古老的帖子,但我挣扎着用一个小的解决方法逃脱了.我需要将图像对齐到右边,并且距离顶部恰好是170像素.并且需要文本在图像的顶部,左侧和底部流动.所以我所做的是创建一个宽度为0px,高度为170px并向右浮动的.然后img将浮动并清除正确的瞧!

<!-- I used CSS, but inline will serve well here -->
<div style="float: right; width: 0px; height: 170px"></div>
<div style="float: right; clear: right"><img src="..." /></div>
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
text text text text text text

工作得很好:)

Answer 3

使用 flexbox 结合 shape-outside 技巧，现在只需几行代码就可以了。

.wrapper {
  display: flex; /* this is needed for the height:100% */
}

.box {
  text-align: justify;
  font-size: 20px;
}

.float {
  float: right; /* shape-outside only apply to float elements */
  height: 100%; /* take all the height */
  margin-left: 15px;
  /* push the image to the bottom */
  display: flex;
  align-items: flex-end;
  /**/
  shape-outside: inset(calc(100% - 100px) 0 0); /* make the text flow on the top free space*/
}

<div class="wrapper">
  <div class="box">
    <div class="float"><img src="https://picsum.photos/id/1069/100/100"></div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in dui quis orci ultricies aliquet nec sed enim. Mauris id rutrum nulla, et ornare leo. Donec aliquet malesuada tellus, eu laoreet lectus tincidunt ut. Quisque lacus magna, interdum eu urna
    ac, aliquet gravida orci. Pellentesque gravida urna sit amet nulla suscipit, at venenatis lorem dignissim. Morbi quis nunc eu velit condimentum ornare. Curabitur finibus tincidunt ullamcorper. Pellentesque tincidunt et odio vitae tempus. Praesent
    ac erat ut eros venenatis pulvinar. Pellentesque eu dapibus dui. Ut semper sed enim ut vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae elit eget velit porttitor consequat nec sed turpis. Proin libero nisl, egestas
    hendrerit vulputate et, lobortis non nulla. Aenean dui libero, dictum vel nibh eget, tristique egestas enim.
  </div>
</div>

这是我围绕这个主题写的一篇文章，其中包含更多示例：https : //css-tricks.com/float-an-element-to-the-bottom-corner/