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

问题描述

我有一个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 />不会超过该元素浮动元素.

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