css - 如何在容器右下角的图像周围环绕文本？

Question

我想将我的链接按钮放在其包含 div 的右下角，并让文本环绕它。我能想到的唯一方法是使用下面的代码（绝对定位）并在我的段落中放置中断标签以强制文本不与图像按钮重叠。有没有不需要在 HTML 中使用中断标签就可以实现相同效果的 CSS？“aliqua”这个词应该放在下一行（下面）。

这是我的代码：

#teaser-cell { 
  float: left;
  width: 164px;
  height: 164px;
}
#teaser-cell .link-button {
  display: block;
  width: 35px;
  height: 35px;
  position: relative;
  bottom: 35px;
  left: 129px;
  background: url(sprite.png) 70px;
}

<div id="teaser-cell">
  <span>Teaser 1</span>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  <a class="link-button" href="#"></a>
</div>

Answer 1

Try this http://jsfiddle.net/A26bG/:

#teaser-cell {
  width: 180px;
}

#teaser-cell .link-button {
  display: inline-block;
  width: 35px;
  height: 35px;
  background: url(...) 70px;
  float: right;
}

<div id="teaser-cell">
  <span>Teaser 1</span>
  <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        <a class="link-button" href="#"></a>
    </p>  
</div>