如何在图像周围环绕特定文本？答案

【问题标题】：How to wrap specific text around an image?如何在图像周围环绕特定文本？
【发布时间】：2012-08-18 18:52:27
【问题描述】：

我正在尝试将文本环绕在图像周围，但没有成功。

 <span>Zion Church</span>
    <div><a href="#"><img src="member.jpg"  width="" height="" class="floatleft"></a>
      jffhuhjherwkhrewkhurewyurewyretyunuyrkwugrnhky
      </div>

       img.floatleft {
       float: left;
       margin-left: 15px;
        }

【问题讨论】：

您的真实代码中是否存在该 CSS？

标签： html css text word-wrap

【解决方案1】：

“jffhuhjherwkhrewkhurewyurewyretyunuyrkwugrnhky”这个词太长，无法放在图像旁边，所以它向下移动。如果您想强制单词中断，请尝试在容器元素的 CSS 中添加 word-break: break-all。

【讨论】：

显然他不会放那么长的词，这是为了测试目的。 :-D
在实际测试中，只要将 CSS 代码正确放置在 style 元素中，发布的代码就可以工作。所以解释似乎是正确的：当使用那个“单词”时，它会在浏览器窗口相对较窄时防止换行。然而，使用word-break: break-all 几乎总是一个错误的解决方案。而是在适当的地方使用<wbr> 和/或&shy;。

【解决方案2】：

<style type="text/css">
a.imagelink {
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;
}
</style>

<span>Zion Church</span>
<div><a href="#" class="imagelink"><img src="member.jpg"  width="" height="" class="floatleft"></a> jffhuhjherwkhrewkhurewyurewyretyunuyrkwugrnhky </div>

【讨论】：

请问 a.imagelink 是什么意思？这不是一个标识符（id 或类）a.imagelink{ }
您的图片位于链接标签内。所以我们给它一个类并设置它的属性。只需给它一个类名并尝试它<a href="#" class="imagelink">