浮動要素を画像とテキストに合わせる

Question

http://www.reversl.net/colors/のようになりますが、http://www.reversl.net/demo/のように見えるはずですが、2つの小さな問題が発生しました。

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; 
} 

と親がその背後に崩壊しないように:afterとクリア修正がそれを作るだろう、独自の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> 

を置きます。

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> 

これは

.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はそれをテストしたウルCSSであってもよいが、...それが動作するはず