5

当一个 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 下方蔓延。这种效果可能吗？

请注意，我使用 float 属性不是作为列的替代品，而是作为一个让文本围绕它流动的块。到目前为止，所提出的解决方案都没有考虑到这一点。为了清楚起见，这里有一些图像。

这就是我得到的：

坏的

这就是我要的：

好的

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

4

6 回答 6

8

这是一个解决方案：

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

基本上这里的魔力是overflow: hidden，它改变了 CSS 视觉格式化模型。看看CSS 布局基础，第 5 部分：浮动：

修复相邻的盒子

我们先来看看红色段落边框问题。段落边框出现在图像后面的原因是因为浮动不会重新定位与其相邻的块框。在此示例中，浮动图像仅将段落内的行框推过。所以文本被推到右边，但实际的段落框仍然延伸到容器的整个宽度。

这个问题的修复来自CSS 2.1 规范的浮动部分中一个非常隐藏的段落 ：

表格的边框框、块级替换元素或建立新块格式化上下文的正常流中的元素（例如具有“溢出”而不是“可见”的元素）不得与与元素本身相同的块格式化上下文。

因此，为了防止我们的段落块与浮动内容重叠，解决方案是创建一个“新的块格式化上下文”，用 CSS 规范作者的术语。听起来很棘手，是吗？幸运的是，这并不难。任何满足以下条件的块都会创建新的块格式化上下文：

  • 浮动
  • 绝对定位
  • 具有更不寻常的风格之一的显示属性值（inline-block、table-cell 等）
  • 将其溢出属性设置为可见以外的内容。

最后一个选项是在大多数情况下最容易做到的：在我们的段落上设置溢出：自动将创建一个新的“块格式化上下文”，并将段落边框呈现在正确的位置。

于 2009-10-14T15:42:00.210 回答
5

如果你span在你的div和风格中添加一个像这样的（当然，我通常不会使用内联样式）：

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

然后你可以得到这个 fiddle 中显示的效果。请注意，overflow:hiddenondiv本身是为了适应长文本字符串的换行。

于 2013-04-14T01:24:53.610 回答
4

看来这根本不可能像我希望的那样。正如 Cletus 解释的那样，“没有什么允许的。你可以将文本环绕在右侧的浮点数上，但这也会将块元素扩展到右侧。块元素根据定义是一个正方形，你似乎想要一个顶部的正方形右切出和边界跟随那条线。做不到。

（我赞成 Cletus 的答案，但不想将其标记为正确的“答案”，因为我相信未来的 Google 员工应该很快就会失望。）

于 2010-11-24T16:56:50.047 回答
2

您应该将另一列指定为向左浮动。您现在拥有它的方式是左侧的文本将包裹右侧的浮动文本。指定左侧浮动对象的大小也是明智的。

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

另外，考虑使用 CSS，它将使这段代码更容易长期维护<<

编辑：我以为您希望所有内容都向左浮动我想我误解了您的问题。你试图做的事情是不可能的。您可以做的最好的事情是指定向右浮动的对象的边距等于 400-150 (250px)，或者指定“一些文本”对象的宽度等于 (250px)。

于 2009-10-14T15:40:58.240 回答
0

我认为你只需要做一件事：

  • 给“示例文本” div 一个右边距，大于右浮动元素的宽度

那应该这样做。

编辑：根据您的编辑，我建议您使用 span （内联元素）而不是 div （块元素）。如果您总是需要它位于单独的行上，您可以给该元素和它后面的元素一个 clear:left。

于 2009-10-14T15:40:35.197 回答
0

我这么晚才知道这个问题，无论如何我正在解决你的问题。看到这个小提琴

你需要定义display: table;

像这样：

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

注意 display: block;不起作用display: table;，您也可以使用display: table-cell;

你可能也喜欢这个问题：css inline-block vs table-cell

于 2013-04-19T15:32:58.907 回答