如何在不隐藏 DIV 部分的情况下使用 CSS 浮动
当在某个 DIV 上使用 CSS 浮动时，其他未浮动的 DIV 会继续占用浮动 DIV 的空间。虽然我确信这是故意的，但我不知道如何达到我想要的效果。请考虑这个例子：
<html>
<div style="width:400px">
<div style="width:150px;float:right;border:thin black solid">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
<div style="background-color:red;border:thin black solid">Some sample text</div>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</div>
</html>
如果您将此 HTML 粘贴到浏览器中（或检查其 jsfiddle），您将请注意，“某些示例文本”是红色的，并且红色背景一直延伸到浮动 DIV。虽然我确信有一种方法可以遮盖我不想要的红色背景部分，但它仍然会将边框裁剪掉并隐藏在 DIV 下方。理想情况下，我希望背景颜色和边框仅占据有效的文本空间，而不是在浮动 DIV 下方蔓延。这种效果可能吗？
请注意，我使用浮动属性不是作为列的替代，而是作为一个让文本围绕其流动的块。到目前为止，所提出的解决方案都没有考虑到这一点。为了清楚起见，这里有一些图像。
这就是我得到的：
这就是我想要的：
您会注意到，在这两个示例中，当文本到达底部时，最终文本会环绕浮动部分。我的第二个例子可以通过直接指定包含“一些示例文本”的 div 的宽度来实现。我不想指定宽度。这似乎是多余的，因为我想要与其周围文本的宽度相同。但也许这是不可能的？
When CSS float is used on a DIV, other DIVs that are not floated continue to occupy the space of the floated DIV. While I am sure this is intentional, I do not know how to achieve the effect I am looking for. Please consider this example:
<html>
<div style="width:400px">
<div style="width:150px;float:right;border:thin black solid">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
<div style="background-color:red;border:thin black solid">Some sample text</div>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</div>
</html>
If you paste this HTML in a browser (or examine its jsfiddle), you'll notice that "Some sample text" is red, and that the red background extends all the way through the floated DIV. While I am sure there is a way to obscure the parts of the red background I don't want, it would still leave the border cropped off and hidden underneath the DIV. Ideally, I want the background color and border to only occupy valid text space, and not creep underneath the floated DIV. Is this effect possible?
Please note that I am using the float property not as a replacement for columns, but as a block that will have the text flow around it. So far none of the proposed solutions takes this into account. For clarity, here are some images.
This is what I get:
This is what I want:
You'll notice that in both examples, the final text wraps around the floated part as the text reaches the bottom. My second example I can achieve by directly specifying the width of the div containing "Some sample text". I do not want to specify the width. It seems redundant since I want the same width as that of the text around it. But perhaps that isn't possible?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（6）
这里有一个解决方案：
基本上，这里的魔力是
overflow:hidden，它改变了 CSS 视觉格式化模型。查看 CSS 布局基础知识，第 5 部分：浮动：Here's one solution:
Basically the magic here is
overflow: hidden, which changes the CSS visual formatting model. Take a look at CSS layout fundamentals, part 5: floats:如果您在
div中添加一个span并像这样设置样式（当然，我实际上通常不会使用内联样式）：那么您可以获得 此小提琴中显示的效果。请注意，
div本身上的overflow:hidden是为了适应长文本字符串的换行。If you add a
spanin yourdivand style that like so (of course, I would not actually normally use inline styling):Then you can get this effect shown in this fiddle. Note that the
overflow:hiddenon thedivitself is to accommodate line wrapping for long text strings.看来这根本不可能如我所希望的那样。正如 Cletus 解释的那样，“没有什么允许这样做。您可以将文本环绕在右侧浮动周围，但这也会将块元素向右扩展。根据定义，块元素是一个正方形，您似乎想要一个顶部带有正方形的正方形。”右切并沿着那条线的边界做不到。”
（我赞成 Cletus 的回答，但不想将其标记为正确的“答案”，因为我相信未来的 Google 员工应该很快就会失望。）
It appears this is simply not possible the way I had hoped. As Cletus explained, "Nothing allows that. You can wrap text around the right float but that will extend the block element to the right as well. A block element is, by definition, a square and you seem to want a square with the top right cut out and the border to follow that line. Can't do it."
(I upvoted Cletus' answer, but didn't want to mark it as the correct "answer" because I believe future Googlers should be let down quickly.)
您应该将另一列指定为左浮动。现在的方式是，左侧的文本将包裹右侧的浮动文本。指定左侧浮动对象的大小也是明智的做法。
另外，考虑使用CSS，它将使这段代码更容易长期维护<<
编辑：我以为你希望所有内容都向左浮动，我想我误解了你的问题。你想做的事是不可能的。您可以做的最好的事情是指定向右浮动的对象的边距等于 400-150 (250px)，或者指定“某些文本”对象的宽度等于 (250px)。
You should specify the other column as float left. The way that you have it right now the text on the left is going to wrap the floated text on the right. It would also be wise to specify the size of the floated object on the left too.
Also, consider using CSS it will make this code much easier to maintain long-term<<
EDIT: I thought you wanted everything to be floated to the left I think I misunderstood your question. What you are trying to do is not possible. The best thing you could do is either specify the margin of the object floated to the right to be equal to 400-150 (250px), or specify the width of the "some text" object to be equal to (250px).
我认为您只需要做一件事：
就可以了。
编辑：根据您的编辑，我建议您使用 span（内联元素）而不是 div（块元素）。如果您始终需要将其放在单独的行上，则可以为该元素及其后面的元素指定一个clear:left。
I think there is only one thing you need to do:
That should do it.
Edit: Based on your edit I would suggest you use a span (an inline element) instead of a div (a block element). If you always need it to be on a separate line, you can give both that element and the element after it a clear:left.
我这么晚才知道这个问题，无论如何我正在解决你的问题。请参阅此 Fiddle
您需要定义
display: table;如下所示：
注意
display: block;不会像display: table;一样工作，您也可以使用display: table-cell;你可能也喜欢这个问题： css inline-块与表格单元格
I came to know this question so late, anyway I am fixing your problem. See this Fiddle
You need to define
display: table;As this:
Note
display: block;won't work asdisplay: table;and you could also usedisplay: table-cell;You may also like this question: css inline-block vs table-cell