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

概述我想要一种方法来防止流动文本列变得太窄.例如,在 HTML文本列中,有一个浮动到左侧的图像.正如预期的那样,文本在图像周围的列的右侧向下流动： 但是,如果图像几乎与列一样宽,那么文本最终会变得很窄： 在这种情况下,我希望文本不会流过图像,而是下降到它下面,好像图像是一个块： 我试图找到一种简单而通用的方法.这是一个博客 – 我希望能够添加图像和文本,可能添加一个类或粘贴一点标记(叹气),并使流程工 我想要一种方法来防止流动文本列变得太窄.例如,在 HTML文本列中,有一个浮动到左侧的图像.正如预期的那样,文本在图像周围的列的右侧向下流动：

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

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

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

解决方法 将 display: inline-block;设置为元素时,元素将与周围内容一起流动.

所以你需要添加一个换行符< 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 >    <!-- Here is the content... -->  </p></div>

CSS：

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

这是JSBin demo.

总结

以上是内存溢出为你收集整理的html – 在浮动图像周围具有最小列宽的流动文本全部内容，希望文章能够帮你解决html – 在浮动图像周围具有最小列宽的流动文本所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。