我想要一种方法来防止流动文本列变得太窄.例如,在
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 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.
