我怎样才能包围右下角的文本？
每当我尝试在CSS中看似简单的东西时，它都不起作用。
我有一个包含460×160图像的内容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 | ------------------
在这种情况下，文本打印在图像上方或下方。
所以…我怎么能做到这一点？
似乎在（2003） 之前，（2002） 之前或之前（2005）
最后一个链接实际上建议一个基于JavaScript的解决方案 ，但对于一个固定（即不流动）的解决方案。
但是，与其他建议一致
唯一的办法就是把浮动的元素放在文本的中间。 所有的时间都不可能完美无缺。
或者这个 ：
它由浮动一个垂直的“推动”元素（如img，但它可能是聪明的只是使用一个空的div），然后浮动所需的对象下，使用清除属性。 这种方法的主要问题是你仍然需要知道有多少行文字。 它使事情变得更加容易，并且可以绝对用javascript编码，只需要将“推动者”的高度改变为容器高度减去浮动高度（假设你的容器不是固定的/最小高度） 。
无论如何，正如在这个话题中讨论的，没有简单的解决方案…
Cletus在2003年的评论中提到了这个线索 ，这再一次说明了它不能轻易实现的事实。
但是，它的确引用了Eric Meyer的文章 ，这个文章接近你想达到的效果。
通过了解漂浮物和正常流量如何相互关联，以及理解如何使用清理来操纵漂浮物周围的正常流动，作者可以使用漂浮物作为非常强大的布局工具。
因为浮动本来不是用来布局的，所以一些黑客可能需要使它们按预期行事。 这可能涉及包含浮动元素的浮动元素，“清除”元素或两者的组合。
那么…这是一个很老的帖子，但我挣扎着，用一个小的解决方法逃脱了这一点。 我需要有一个图像对齐的权利，从顶部正好170px。 并且需要文本在图像的顶部，左侧和底部流动。 所以我所做的就是创建一个宽度为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
工作得很好:)
我发现最简单的解决方案是将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>
填充和边距对我的工作原因是因为我在它的父元素“contentDiv”内使用它根据内容自动调整div的高度。 不知道它的任何用途。
对于jQuery解决方案，请尝试由gilly3创建的lowFloat插件： https ： //github.com/gilly3/lowFloat
我找到的解决方案涉及到你有一个宽度不变的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.comhttp://img.dovov.comdaiphyerv6-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>
除了发布的解决方案之外，我使用了一个快速的JQuery hack来动态调整推送器的高度，方法是将我想要的区域的高度从内容区域的高度向下对齐，并将其应用于推动者div，如下所示：
$("#pusher").css("height", $("#content").height() - $("#contentToAlign").height() + 'px')
它需要一些微小的调整，但一般工作，以及你会得到！
好。 所以我实际上也遇到了同样的问题，在某种程度上，答案就像星期六晚上的芝士蛋糕一样。 当您尝试在Word中设置文本换行时，它与您碰到的几乎相同。
img.right { float: right; }
现在你所要做的只是把它放在文本里你想要的线断开。 文本将浮动到文本的末尾，所以它会始终将文本向左推，但如果您将图像放在文本的中间，如…
<p>This is some text <img src="example.jpg" class="right" /> and then add some more text.</p>
顶部留在原来的位置，文字可以自由地浮在图像上方，剩下的部分被推到图像的左边。 这是一个解决方法，但不像使用JS那样乏味，如果使用所见即所得的编辑器，则更容易。 如果你使用一个所见即所得的编辑器，就可以自动想到这个功能。 ：P问题解决了。
干杯。
