文字在浮动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:
我使用 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屋!