流式布局中的最小段落宽度

浮动图片会从围绕它的文本中占用水平空间。 在固定宽度布局中，您可以检查留给文本的空间是否足以创建一个看起来不错的列，并且可以确信其他人也会看到相同的内容。

但是，在流式布局中，您没有这样的保证。 如果用户在较小的设备上查看您的网站，留给文本的水平空间可能只能容纳每行一两个词。 这样窄的文本列不仅看起来难看；它也很脆弱。 包含长词的句子将在长词向下移动到浮动图片下方时发生断裂，并在句子中间留下空白的空隙。

难以捉摸的最小段落宽度

为了解决段落过窄的问题，我们需要一种方法来实现最小段落宽度。 如果浮动图片留下的空间低于此宽度，则整个段落会向下移动到图片下方。

直观地，以下 CSS 似乎符合要求

p {
  min-width: 10em;
  /* For demonstration */
  border: 1px solid red;
}

但是，这没有效果。 图片浮动在段落上方，因此不会减少段落的“官方”宽度。 同时，段落内的文本忠实地避开浮动图片，因此问题仍然存在。

针对已知图片宽度的媒体查询解决方案

如果您的图片（或其他浮动内容）共享一个固定且预定义的宽度，那么您可以使用 CSS3 媒体查询在屏幕尺寸过窄无法同时容纳图片和文本列的情况下禁用浮动。

当然，此解决方案仅适用于支持 CSS 媒体查询的浏览器。 对于其他浏览器，该解决方案将降级为原始问题。

@media screen and (max-width: 400px) {
  img {
    float: none;
  }
}

使用伪元素的通用情况解决方案

当浮动元素具有任意宽度时，媒体查询解决方案不起作用，而且也不够优雅。

一个更好的解决方案是为每个段落添加一个具有所需最小段落宽度的不可见的 CSS 伪元素。 如果没有足够的空间容纳此伪元素，那么它将被推到图片下方，并将段落也带到下方。

此解决方案得到了大多数浏览器的支持。 在较旧的浏览器上，该解决方案会优雅地降级为原始问题。

p:before {
  content: "";
  width: 10em;
  display: block;
  overflow: hidden;
  /* For Demonstration */
  border: 1px solid green;
}

伪元素的绿色 border 仅用于演示目的。 该解决方案不需要它，您应该在代码中将其删除。 然后，伪元素将不会占用任何垂直空间。

演示和下载

查看演示   下载文件

关于作者

Gustav Andersson 是 The Modern Nomad 的作者，该网站探索了游牧生活方式，它让人们可以随时随地在任何地方生活和工作。 他是一个热爱探戈、斗牛、语法和燃烧人，他希望激发您去考虑没有地址的生活。