使浮動元素與圖像和文本對齊

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測試，但希望它應該工作..