文本围绕着浮动的div包裹,但边框和<hr />s却没有。[英] Text wraps around floating div but borders and <hr />s do not

本文是小编为大家收集整理的关于文本围绕着浮动的div包裹,但边框和<hr />s却没有。的处理方法,想解了文本围绕着浮动的div包裹,但边框和<hr />s却没有。的问题怎么解决?文本围绕着浮动的div包裹,但边框和<hr />s却没有。问题的解决办法?那么可以参考本文帮助大家快速定位并解决问题。

问题描述

我有一个float: right的div,它在父级内.同一父div中也有p元素,文本围绕float: right div正确.

但是,如果我将p元素设置为具有边框或进行<hr />,则边框不会在文本停止的地方停止,而是在float: right div.

这是对情况的美丽MSpaint描述:

请注意,黑色水平线的绿色部分在浮动div.

后面

我如何获得边框或<hr />或任何东西只能像文本一样宽,而不是在div后面?

推荐答案

我知道这个问题是在某个时候发布的,但是我今天遇到了同样的问题,并找到了另一个解决方案:

http://jsfiddle.net/mvx62/

我使用border-bottom而不是<hr />标签,必须添加overflow: hidden;.看看小提琴,我认为这比接受的解决方案更有用,因为您还可以在水平线上添加一个边距,并且与文本具有相同的差距.

您也不需要定义Z值,也不需要任何黑客或解决方法.

其他推荐答案

我以前遇到过这个问题,我不确定是否可以解决.

在您的情况下,您可以用另一个元素包裹绿色框,然后用padding交换padding,并将其背景设置为#fff cover cover .

其他推荐答案

检查小提琴...

>

我在这里所做的是给出浮动元素a z-index css属性,它将其"高于"非浮元素(具有较小的值z-index),并且<hr />不会超过该元素浮动元素.

在我的示例中,它的宽度与文本一样宽,但我不确定这是否可以跨浏览器(我在Chrome上).让我知道是否没有.

我希望这会有所帮助.
hristo

P.S.出色的MSpaint Skillz:)

本文地址:https://www.itbaoku.cn/post/583371.html