浮動文本在底部定位框

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

使用清晰：前兩者。

<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; 
}