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

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

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

在这种情况下,我希望文本不会流过图像,而是下降到它下面,好像图像是一个块：

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

解决方法

所以你需要添加一个换行符< br>在文本中产生换行符,但该行的垂直空间将保持为you mentioned. [还有一件事就是水平滚动条,它将出现在if you decrease the width of the panel.]

介绍

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

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

而且,在这种情况下,不会出现水平滚动条,因为浏览器不会显示< table>当它内部没有任何元素或任何特定的高度或边框属性时.

(不同的浏览器有不同的行为,Mozilla Firefox不会显示具有特定边框属性但具有谷歌浏览器功能的表格元素.)

HTML：

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

CSS：

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

这是JSBin Demo.

解决方案

作为纯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 demo.

（编辑：财气旺网 - 财气网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!