Ausrichten Floated Elements mit Bildern und Texten

Question

Also ich arbeite an einem Layout http://www.reversl.net/colors/, die wie http://www.reversl.net/demo/ aussehen sollte, aber ich habe in zwei kleine Probleme gerannt.

1) Ich kann den Avatar nicht mit dem unteren Rand des Textes neben ihm ausrichten. (Ich habe versucht, vertikal-align: unten zum img-Tag, aber ohne Erfolg)

2) Ich kann nicht die Statistiken erhalten, um gleichmäßig mit dem Avatar auszurichten. Es sollte einen Weg geben, dies zu tun, indem man einfach schwebt, anstatt den Statistiken einen negativen Rand hinzuzufügen, oder?

Answer 1

Sie sollten beide in ein div einfügen und sie nach links und rechts schweben lassen, wenn Sie sie auf diese Weise ausrichten möchten. Hier ist was ich in der CSS ändern würde.

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

und die

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

Die klare-fix diejenigen in ihre eigenen div setzen mit :after wird es machen, so dass die Eltern nicht dahinter nicht kollabiert.

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> 

Dies sollte ur 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 es getestet, aber der Hoffnung, es sollte funktionieren ..