html - 图片格式旁边的标题文本

Question

这是我的代码:

<div class="contact">
<p class="size25">TOP 1% Realtors</p>

<p class="size16">32 years in real estate</p>

<p class="size16">Closed one home every 10 days in 2011 - 2012</p>

<p class="size16">Specializing in the 24/680 Corridor</p>

<p class="size16"><a href="mailto:example@aol.com">example@aol.com</a></p>

<p class="size25 phone">(510) 555.5555</p>
</div>

CSS:

.contact p{
    float:right;
}
.contact{
    color: #fff;
    display: block;
    width: 421px;
    height: 114px;
    position: absolute;
    margin-top: -96px;
    margin-left: 519px;
    font-family: 'Marcellus', serif;
    font-weight:300;
    line-height: 12px;
}
.contact a:link {
    text-decoration:none;
    color: #AC872F;
}
.phone{color: #AC872F}
.size25{font-size:25px}
.size16{font-size:16px}
.size14{font-size:14px}
.size11{font-size:11px}
.size10{font-size:10px}

图片:http://imgur.com/LntF419

我希望右边的文本右对齐，并且每个

在它自己的行上。现在你可以看到电子邮件不是。这也是我第一次使用 twitter bootstrap，所以如果有什么可以帮助我的，请告诉我。

Answer 1

将 clear: both 添加到 .contact p。 clear 属性删除与 float 元素一致的其他元素。

演示:http://jsfiddle.net/q4YdC/ (出于可见性原因，我删除了 div 边距)