3

当我有足够的屏幕宽度时，文本会很好地环绕右浮动图像（参见下面的第一个示例）。但是当视口变窄时，我可以在图像的左侧找到一个单词，其余的文本在它下面，特别是如果前几个单词中的一个长度较长（参见下面的第二个示例）。

没有在图像上添加额外的左边距（当有足够的空间时看起来很奇怪），我能做些什么来防止这种情况发生吗？

我不会提前知道实际的文本内容或视口的宽度。

在此处输入图像描述

4

4 回答 4

2

有点 hacky，但将前几个单词包装在一个元素中，就像<span>可以display:inline-block说迫使整个单词集作为一个“实体”移动一样。

<span style="display:inline-block">First couple words</span> rest of content....


span {
  display: inline-block;
}
img {
  float:right;
}
<div>
<img src="https://placehold.it/300x300" />
<span>First couple words</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur blandit aliquam mauris, ut tempor elit vehicula ut. Cras quis consequat magna, quis viverra risus. Vestibulum et mattis felis, sed interdum ipsum. Nulla accumsan a turpis vitae scelerisque. Nulla dapibus imperdiet quam a dignissim. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed egestas sem nunc, nec semper tortor hendrerit a. Sed non cursus metus. Nunc nisl purus, accumsan sed ligula quis, mollis euismod mi. Vivamus at egestas diam. Morbi sed mi in est eleifend tempus nec non mauris. Etiam at iaculis magna, iaculis interdum lorem. Suspendisse potenti. Phasellus elementum nisi tellus, ut vestibulum massa laoreet fermentum.

</div>

于 2017-12-28T22:01:19.003 回答
0

我可能找到了另一种在语义上更正确并且不需要对文本本身进行任何操作的解决方案......

由于当浮动图像为文本留出一点空间时会出现问题，但还不足以使其流畅地流动，因此我强制图像不为任何文本留出空间。

我通过媒体查询来做到这一点 - 对于我正在处理的网站，@media (max-width: 550px) 是最佳选择。在我的图像上已有的课程中，我只需添加“宽度：99%”。

当视口大于 550 像素时，文本有足够的空间正常流动。低于 550 像素，反正我没有太多空间，图像现在几乎占据了整个宽度，并将文本推到它下面。

有人看到这样做有问题吗？

于 2017-12-29T20:56:34.033 回答
0

如果您不想像 Kevin Pei 的解决方案那样滥用您的 DOM，您可以改为滥用您的文本。将文本中的第一个空格设为不间断空格，&nbsp;，浏览器不会在此处插入换行符：

img {
  float: right;
}
<div>
<img src="https://placehold.it/500x50">
Lorem&nbsp;ipsumdolorsitamet, consectetur adipiscing elit. Curabitur blandit aliquam mauris, ut tempor elit vehicula ut. Cras quis consequat magna, quis viverra risus. Vestibulum et mattis felis, sed interdum ipsum. Nulla accumsan a turpis vitae scelerisque. Nulla dapibus imperdiet quam a dignissim. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed egestas sem nunc, nec semper tortor hendrerit a. Sed non cursus metus. Nunc nisl purus, accumsan sed ligula quis, mollis euismod mi. Vivamus at egestas diam. Morbi sed mi in est eleifend tempus nec non mauris. Etiam at iaculis magna, iaculis interdum lorem. Suspendisse potenti. Phasellus elementum nisi tellus, ut vestibulum massa laoreet fermentum.
</div>

用起来感觉不错   对于空表格单元格以外的其他内容。

于 2017-12-29T07:40:41.097 回答
0

如果我正确理解您的问题，您可以使用 clear:left 属性来解决此处显示的问题：w3School

于 2017-12-28T22:01:39.460 回答