在浮动图像周围具有最小列宽的流动文本

Question

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

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

在这种情况下，我希望文本只是不流过图像，但要低于它，就像图像是块一样：

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

Answer 1

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

因此，您需要添加换行符<br>以在文本中生成换行符，但该行的垂直空间将保持为you mentioned。 [还有一件事就是水平滚动条会出现if you decrease the width of the panel。]

简介

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

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

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

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

<强> HTML：

border

<强> CSS：

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

以下是 JSBin Demo 。

解决方案

作为纯CSS方式，我使用::before伪元素来创建一个行为类似于img { float: left; } table { width: 12em; } HTML元素的元素。

<强> HTML：

<table>

<强> CSS：

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

以下是 JSBin demo 。

Answer 2

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

<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 ems，这会增加一行垂直空间。我想我可以减少<br>的行高，但整个事情可能会有点冗长。

Answer 3

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

如果img为flot: right，请先将clear: left添加到p：之前。

如果img为float: left，请先将clear: right添加到p：

p:before {
  content: "";
  width: 10em;
  display: block;
  overflow: hidden;
  clear: left;   //use clear:right if img is float:left
}

Answer 4

我找到的最简单的方法是通过阻止包装前几个单词来设置列的最小宽度：

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

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

这很有效，但是：

• 我每次执行此操作时都必须手动编辑
• 我无法精确控制列宽（以ems或像素为单位）