代码之家 › 专栏 › 技术社区 › Kirk Woll

如何在不隐藏DIV部分的情况下使用CSS float

css-float positioning layout css html

Kirk Woll · 技术社区 · 16 年前

当CSS float用于一个div时,其他未浮动的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 ,您会注意到“一些示例文本”是红色的,并且红色背景一直延伸到浮动分区。虽然我确信有一种方法可以隐藏我不想要的红色背景部分,但它仍然会将边框剪切并隐藏在分区下。理想情况下,我希望背景颜色和边框只占有效的文本空间,而不是在浮动的分区下爬行。这种效果可能吗?

请注意,我使用的不是float属性来替换列,而是将文本围绕它的块。到目前为止,所有建议的解决方案都没有考虑到这一点。为了清晰起见,这里有一些图片。

这就是我得到的:

Bad

这就是我想要的:

Good

您会注意到,在这两个示例中,当文本到达底部时,最终文本围绕浮动部分。我的第二个示例可以通过直接指定包含“一些示例文本”的DIV的宽度来实现。我不想指定宽度。这似乎是多余的,因为我希望它周围的文字宽度相同。但也许那是不可能的?

6 回复 | 直到 13 年前

ScottS 13 年前

span div

<div style="overflow: hidden;">
  <span style="background-color:red;
               border:thin black solid;
               display: inline-block;">
   Some sample text
   </span>
</div>

this effect shown in this fiddle overflow:hidden

cletus 16 年前

<div style="background-color:red;border:thin black solid;overflow:hidden;">Some sample text</div>

overflow: hidden CSS layout fundamentals, part 5: floats

floats section

block formatting context

Kirk Woll 15 年前

slimbo 16 年前

<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; width: 250px; border:thin black solid">Some sample text

     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></div>

</html>

jeroen 16 年前

Community Mohan Dere 9 年前

Fiddle

display: table;

<div style="background-color:red;border:thin black solid;display: table;">Some sample text</div>

display: block; display: table-cell;

css inline-block vs table-cell