11

我想要一种方法来防止流动文本的列变得太窄。例如，在一列 HTML 文本中，有一个图像向左浮动。正如预期的那样，文本在图像周围的列的右侧向下流动：

文字流过图像 - kapai！

但是，如果图像几乎与列一样宽，那么文本最终会非常窄：

文字勉强流过图像 - 臭气熏天！

在这种情况下，我希望文本根本不流过图像，而是像图像是一个块一样下降到它下方：

文字落在图像下方 - 咕噜！

我试图找到一种简单而通用的方法来做到这一点。这是一个博客 - 我希望能够添加图像和文本，也许添加一个类或粘贴一些标记（叹气），并让流程工作。我宁愿只使用 CSS 和 HTML，因为很难将 JavaScript 插入到博客文章中。我有几种方法（见我的答案），但都不是令人满意的。你能做得更好吗？

4

4 回答 4

8

当您设置display: inline-block;一个元素时，该元素将与周围的内容一起流动。

因此，您需要添加换行符<br>以在文本中产生换行符，但行的垂直空间将保持如您所提到的那样。[还有一件事是水平滚动条，如果你减小面板的宽度就会出现。]

介绍

在这里使用<table></table>element 有很多好处。

当您使用<table>element (如下所示)时，它会导致内容转到下一行。当剩余的水平空间低于 的宽度时<table>，它将转到下一行并将内容向下推。

而且，在这种情况下，水平滚动条不会出现，因为<table>当它没有任何内部元素或任何特定height或border属性时，浏览器不会显示。

（不同的浏览器有不同的行为，Mozilla Firefox 不会显示table具有特定border属性的元素，但 Google Chrome 会。）

HTML：

<img src="http://placehold.it/100x50" alt="">
<table></table>
Lorem ipsum dolor sit amet...

CSS：

img { float: left; }
table { width: 12em; }

这是JSBin 演示。

解决方案

作为一种纯 CSS 方式，我使用::before伪元素来创建一个行为类似于<table>HTML 元素的元素。

HTML：

<div>
  <img src="http://placehold.it/400x400" alt="">
  <p class="content">
    <!-- Here is the content... -->
  </p>
</div>

CSS：

img { float: left; }

.content:before {
  content: ' ';
  display: table;
  width: 10em;    /* <-- Change the current width size */
}

这是JSBin 演示。

于 2013-08-22T11:38:52.607 回答
3

我尝试在文本之前添加一个额外的元素。我认为这可能只是工作。像这样的东西：

<style>
.shim { display: inline-block; height: 0; width: 12em; }
</style>

<img class="floated">
<div class="shim"></div><br>
If one examines Derridaist reading...

这没关系 - 如果流列很窄，那么垫片会下降到图像下方，并且文本会跟随它。我必须添加<br>以阻止文本缩进 12 em，这会增加一行垂直空间。我想我可以减少行高，<br>但整个事情最终可能会有点冗长。

于 2013-08-22T11:20:17.543 回答
3

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

如果 img 是flot: right，则添加clear: left到 p:before。

如果 img 是float: left，则添加clear: right到 p:before

p:before {
  content: "";
  width: 10em;
  display: block;
  overflow: hidden;
  clear: left;   //use clear:right if img is float:left
}
于 2015-09-01T06:15:28.063 回答
1

我发现的最简单的方法是通过防止前几个单词换行来设置列的最小宽度：

<style>
.chunk { white-space: nowrap; }
</style>

<p><span class="chunk">If one examines</span> Derridaist reading...

这很好用，但是：

  • 每次执行此操作时，我都必须手动编辑文本
  • 我无法精确控制列宽（以 em 或像素为单位）
于 2013-08-22T11:05:32.687 回答