垂直对齐浮动元素

Question

首先，这里有一些图片解释我到底想要做什么：

应该如何：

现在的情况如下：

这是标记：

 <div class="info">
    <img src="http://placehold.it/40x40" class="img-rounded avatar">
     <h5 class="name">John Doe</h5>
     <time>2 days ago</time>
     <a class="follow"><i class="fa fa-twitter"></i>Follow me</a>
     <a class="like">112 likes</a>
  </div>

CSS：

.info {
border:1px solid #E6E6E6;
padding-top:20px;
padding-bottom:20px;

}

img.avatar {
float:left;
padding-left:20px;
padding-right:20px;

}
h5.name {
 margin:0;
}
span.date {
font-size:12px;
}
a.like { 
float:right;
padding-right:20px;
}

以下是我正在尝试做的jsbin示例。

有关如何在屏幕截图中对齐它们的任何建议？

Answer 1

不是将各种类分配给超链接，而是将它们嵌套在块元素中。

我改变了你的代码，并更新了jsbin，这就是你要求的吗？

http://jsbin.com/lajugiciyi/1/edit

.info {
    border: 1px solid #E6E6E6;
    padding: 20px 0
}
.avatar {
    float: left;
    padding: 0 20px;
}
.name {
    display: inline-block
}
.name h5 {
    margin: 0;
    padding: 3px 0 0;
}
.like { 
    float: right;
    padding: 0 20px;
}
.follow {
   display: inline-block;
   vertical-align: top;
   padding: 0 20px;
}

Answer 2

您希望follow / like按钮与名称对齐，对吗？

HTML：

<div class="info">
    <img src="http://placehold.it/40x40" class="img-rounded avatar" />
    <div>
        <h5 class="name">John Doe</h5>
        <a class="follow"><i class="fa fa-twitter"></i>Follow me</a>
        <a class="like">112 likes</a>
    </div>
    <time>2 days ago</time>
</div>

CSS：

h5.name {
 margin:0;
 display:inline;
}

http://jsfiddle.net/1319Lw2r/1/

Answer 3

添加以下内容：

a.follow {
    margin-left: 10%; /* adjust to your liking */
}

我建议您在示例中使用margin代替padding。

例如，填充正在推送<a>标签内的文本，这使得锚点比其需要的更宽。通过使用边距而不是它会推动锚点，同时保持其大小受内容约束。您可以通过在<a>标记周围添加边框来对此进行测试。