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

Question

我想将我的链接按钮放在其包含的 div 的右下角，并让文本环绕它。我能想到的唯一方法是使用下面的代码(绝对定位)并在我的段落中放置中断标记以强制文本不与图像按钮重叠。有没有不需要在 HTML 中使用 break 标签就可以实现相同效果的 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

试试这个 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>