我想将链接按钮放在其包含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>
答案 0 :(得分:0)
试试这个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>