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

肯定有人问before (2003)，before (2002)或before (2005)

最后一个链接实际上建议javascript-based solution，但是对于固定（即非流动）解决方案。

然而，与other advices found

一致

唯一的方法是将浮动元素放在文本中间的某个位置。一直都不可能完美无缺。

或this one：

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

无论如何，作为discussed in this thread，没有简单的解决方案......

Cletus在评论thread from 2003中提及，再次声明无法轻易实现这一点。
但是，它确实引用了这个Eric Meyer's article，它接近你想要实现的效果。

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

然而，Chadwick Meyer在his answer中建议了一个基于:before CSS selector（Leonard的answer的变体）的解决方案。
它确实work here。

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/

Answer 4

我发现最简单的解决方案是将img包装在div元素中，然后使用padding-top和margin-bottom值来对齐它。

这是我的CSS

.contentDiv  .bottomRight img{
  height: 130px;
  float:right;
  padding-top: 60px;
  margin-bottom: -10px;
  }

这是HTML

<div class="contentDiv">
 <h1>If you are seeing this and reading it, then all is working well.</h1>
 <div class="bottomRight">
    <img class="bottomRight" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==">
 </div>
</div>

padding和margin对我有用的原因是因为我在父元素中使用它＆＃34; contentDiv＆＃34;根据内容自动调整div的高度。不确定它是否有用。

Answer 5

对于jQuery解决方案，请尝试gilly3创建的lowFloat插件：https://github.com/gilly3/lowFloat

Answer 6

除了发布的解决方案之外，我还使用了一个快速的JQuery黑客动态通过将我想要的区域的高度从内容区域的高度向右下方对齐，并将其应用于推动器div，调整推动器的高度，如下所示：

$("#pusher").css("height", $("#content").height() - $("#contentToAlign").height() + 'px')

它需要一些轻微的调整，但通常可以正常工作！

Answer 7

我找到的解决方案涉及你有一个宽度不变的div，也没有文本的数量。然后，您可以将图像放在文本中并使其对齐=右。因此，如果你周围有正确数量的文字，那么你就得到了div右边和底部的图像。

    <style >
#contents{
    border: 2px solid red;
    background: #ddd;
    position: absolute;
    width:600px;
}



</style>
<div id="contents">
    text text text text text text ...    text text text text text text ...    text text text text text text ...    text text text text text text ...    text text text text text text ...    
    text text text text text text ...    text text text text text text ...   
    text text text text text text ...    text text text text text text ...    text text text text text text ...    text text text text text text ...    text text text text text text ...
    text text text text text text ...    text text text text text text ...    text text text text text text ...    text text text text text text ...    text text text text text text ...    
    text text text text text text ...    text text text text text text ...   
    text text text text text text ...    text text text text text text ...    text text text text text text ...    text text text text text text ...    text text text text text text ...
    text text text text text text ...    text text text text text text ...    text text text text text text ...    text text text text text text ...    text text text text text text ...    
    text text text text text text ...    text text text text text text ...   
    text text text text text text ...    text text text text text text ...    text text text text text text ...    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://daiphyer.com/images/daiphyerv6-sliced_02.png" ALIGN="RIGHT"/>
    text text text text text text ...    text text text text text text ...    text text text text text text ...    
    text text text text text text ...    text text text text text text ...   
    text text text text text text ...    text text text text text text ...   
    text text text text text text ...    text text text text text text ...    text text text text text text ...
     hey hey text text text text text text ...    text text text text text text ...    text text text text text text ...    
    text text text text text text ...    text text text text text text ...
</div>

Answer 8

确定。所以我实际上遇到了同样的问题，在某些时候答案就像星期六晚上的芝士蛋糕一样。当您尝试在Word中设置文本换行时，它几乎与您的命中和未命中效果相同。

img.right {
     float: right;
}

现在你所要做的就是将它设置在你希望线条断开的文本中。文本将浮动到文本的末尾，因此它总是将文本推到左侧，但如果您将图像放在文本的中间，就像...

<p>This is some text <img src="example.jpg" class="right" /> and then add
some more text.</p>

顶部保持原样，文本可以自由浮动到图像上方，其余部分被推到图像的左侧。这是一种解决方法，但不像使用JS那样乏味，如果使用WYSIWYG编辑器，它就更容易了。如果您使用WYSIWYG编辑器自动具有该功能，请考虑它。：P问题解决了。

干杯。

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

8 个答案: