css - 在底部定位框上浮动文本

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