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属性删除与浮动元素一致的其他元素。

演示：http://jsfiddle.net/q4YdC/（由于可见性原因，我删除了div边距）

图片格式旁边的标题文字

1 个答案: