将文本浮动到底部定位框

Question

我想编写html + css来实现结果，如附图所示：。

我的意思是带有文字和箭头框的编码部分。只放置绝对位置不是答案，因为我需要文本浮动箭头框。有没有办法做到这一点？

我已经尝试将各种花车放在盒子和paragraf标签上。在paragraf标签之前，之后和之中放置箭头框。还尝试使用垂直对齐和箭头框上的位置。

小提琴玩： http://jsfiddle.net/K2S5y/1/

<div class="content">
<p>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas males elit lectus felis, malesuada ultricies. Curabitur et ligula.</p>
<div class="arrowMore">arr</div>                
</div>

.content{width:170px;height:170px;border:1px solid red;}
.arrowMore{background:blue;width:70px;height:70px;}

Answer 1

使用clear：ex。

<div style="float:left; width:300px">
    <img/>
</div>

<div style="float:left; width:300px">
    Text text text
</div>

<div style="clear:both"></div>

您可以在此处查看实时示例： http://webdesign.about.com/od/examples/l/bl-css-float-examples.htm#floating

Answer 2

#arrow {
  float: right;
}

/* then possibly  */
#arrow:after {
  content: ' ';
  display: block;
  clear: both;
}