Выравнивание плавающих элементов с изображениями и текстами

Question

Итак, я работаю над макетом http://www.reversl.net/colors/, который должен выглядеть как http://www.reversl.net/demo/, но я столкнулся с двумя небольшими проблемами.

1) Я не могу заставить аватар выровняться с нижней частью текста рядом с ним. (Я пытался добавить вертикальное выравнивание: снизу к тегу img, но безрезультатно)

2) Я не могу выровнять статистику по аватару. Должен быть способ сделать это просто плаванием, а не добавлением отрицательного поля к статистике, верно?

Answer 1

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

протестировал его, но надеялся, что он будет работать ..

Answer 2

Вы должны поместить обоих в 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 сделает так, чтобы родительский объект не рухнул за ним.