【问题标题】: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 几乎总是一个错误的解决方案。而是在适当的地方使用&lt;wbr&gt; 和/或&amp;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{ }
  • 您的图片位于链接标签内。所以我们给它一个类并设置它的属性。只需给它一个类名并尝试它&lt;a href="#" class="imagelink"&gt;
猜你喜欢
  • 1970-01-01
  • 2013-10-11
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2011-11-27
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多