使浮动元素与图像和文本对齐

Question

因此，我正在编写一个应该看起来像http://www.reversl.net/demo/的布局http://www.reversl.net/colors/，但我遇到了两个小问题。

1）我不能让化身与文本的旁边，它的底部对齐。 （我尝试在img标签中添加垂直对齐：底部，但无济于事）

2）我无法获得统计数据与头像均匀对齐。应该有办法通过只是浮动，而不必负边距添加到右侧的统计数据来做到这一点？

Answer 1

你应该把这些都变成一个div和浮动他们的左右，如果你希望它们对齐的方式。以下是我将在CSS改变。

.card { 
    display:block; 
} 
.op { 
    margin-top: 1em; 
    float:left; 
} 
.meta li:after { 
    content:""; 
    clear:both; 
    display:inline-block; 
    width:1px; 
    height:1px; 
} 

并把这些转化为自己的div

<div class="card"> 
    <div class="op"> 
     <a href="#"><img src="avatar.png" alt="" />Josh</a> 
    </div><!--.op--> 
    <ul class="meta"> 
     <li class="fav"> 
      <a href="#" title="See fans of this screenshot">304</a> 
     </li> 
     <li class="cmnt 
      "> 
      <a href="#" title="View comments on this screenshot">35</a> 
     </li> 
    </ul> 
</div> 

清晰的修复与:after将使它所以家长不其背后崩溃。

Answer 2

<div class="op"> 
<a href="#"> 
<img alt="" src="avatar.png"> 
Josh 
</a> 
</div> 
<div class="meta"> 
<div class="fav"> 
<a title="See fans of this screenshot" href="#">304</a> 
</div> 
<div class="cmnt "> 
<a title="View comments on this screenshot" href="#">35</a> 
</div> 
</div> 

这应该是乌拉圭回合的CSS

.meta{ 
position:relative; 
width:50%; // u can set the width to ur preference 
float:right; 
height:auto; 
} 
.cmnt , fav { 
float:left; 
} 
.op { 
height: auto; 
float:left; 
margin-top: 1em; 
overflow: hidden; 
position: relative; 
width: 50%; 
} 

havnt测试，但希望它应该工作..