文字在浮动div周围，但边框和< hr />没有 [英] Text wraps around floating div but borders and <hr />s do not

问题描述

我有一个div float：right ，它在一个父div。在同一父div中还有 p 元素，并且文本正确地环绕在 float：right 但是，如果我将 p 元素设置为具有边框，或者设置< hr /> 边界不会停止在文本停止的位置，而是延伸到 float：right div后面。

I have a div that is float: right and it is inside a parent div. There are p elements inside that same parent div also, and the text wraps around the float: right div properly. However, if I set the p elements to have a border, or do a <hr />, the border does not stop where the text stops, but extends behind the float: right div.

mspaint描述的情况：

Here is a beautiful mspaint depiction of the situation:

请注意，黑色水平线的绿色部分位于浮动div之后。

Note that the green part of the black horizontal line is behind the floating div.

如何获取边框或

How do I get the border or <hr /> or whatever to be only as wide as the text, and not go behind the div?

推荐答案

我知道这个问题在一段时间以前发布，但我今天遇到了同样的问题，并找到了另一个解决方案：

I know this problem was posted some time ago, but I had the same problem today and found another solution:

http://jsfiddle.net/MvX62/

我使用 border-bottom 而不是< hr /> 标记，并且必须添加 overflow：hidden; 。看看小提琴，我认为这是更有用的，然后接受的解决方案，因为你也可以添加一个边距水平线，并有相同的差距，正如文本有。

I use border-bottom instead of the <hr /> tag and had to add an overflow: hidden;. Look at the fiddle, i think this is more useful then the accepted solution, because you can also add a margin to the horizontal line and there is the same gap, as the text has.

此外，您不需要定义z值，也不需要任何黑客或解决方法。

Also you don't need to define z values and don't need any hacks or workarounds.

这篇关于文字在浮动div周围，但边框和< hr />没有的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！