但是,如果图像几乎与列一样宽,那么文本最终会变得很窄:
在这种情况下,我希望文本不会流过图像,而是下降到它下面,好像图像是一个块:
我试图找到一种简单而通用的方法.这是一个博客 – 我希望能够添加图像和文本,可能添加一个类或粘贴一点标记(叹气),并使流程工作.我更喜欢用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 – 在浮动图像周围具有最小列宽的流动文本所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)