如何在其容器右下角的图像周围包装文本？

Question

我想将链接按钮放在其包含div的右下角，并将文本环绕。我能想到的唯一方法是使用下面的代码（绝对定位）并在我的段落中添加break标记以强制文本不与图像按钮重叠。是否有CSS可以实现相同而无需在HTML中使用break标记？ “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>