Как выровнять плавающие элементы так, чтобы их днища совпадали

Question

Я пишу веб-страницу, где я показываю заголовок и дату поверх текста.

Заголовок блога http://filesmelt.com/dl/head00.png

Мой HTML:

<div class="post">
    <h2>Post 1</h2>
    <span class="date">February 28, 2011</span>

    <div class="post-content">
        ...
    </div>
</div>

Мой css:

.post h2
{
    float: left;
}

.date
{
    float: right;
}

.post-content
{
    clear: both;
}

То, что я хочу сделать, это выровнять заголовок и дату по вертикали так, чтобы их основания совпадали. Прямо сейчас они не:

Заголовок блога с выравниванием линий http://filesmelt.com/dl/head01.png

Я попытался обернуть два текстовых элемента в div, установить для position div значение relative и использовать абсолютное позиционирование для двух текстовых элементов (и удалить объявления с плавающей точкой). Это не сработало, потому что верхнее поле не сохранилось из-за сворачивания div-оболочки, хотя я и дал ему класс clearfix.

Answer 1

Многие другие ответы говорят вам, чтобы исправить разницу, применяя статическое число для отступа / высоты строки, что я считаю плохим решением.Если вы «исправляете» разницу статическим числом и в будущем разница изменится, вам придется изменить все статические числа.Представьте, что вы применяете отступ к Date div, а позже изменяется размер шрифта h2, вам придется изменить отступ.

Попробуйте это:

<div class="wrapper">
 <h2>Post 1</h2>
 <span class="date">February 28, 2011</span>
</div>

И css:

.post h2 {
    display: inline-block;
}

.wrapper {
  position: relative;
}

.date {
    display: inline-block;
    position: absolute;
    right: 0;
    bottom: 0;
}

Answer 2

Это должно исправить

.date
{
float: right;
line-height:150%;
}

Answer 3

Используйте padding-top для класса Date

.date
{
    float: right;
    padding-top:15px;//Distance between the red lines in second image
}

Answer 4

попробуйте указать line-height для h2 и span

Syntax:     line-height: <value>;
Possible Values:    

    * normal
    * <length> - for example, 10px
    * <number> - multiplied with the current font size
    * <percentage> - for example, 130% of current font size
    * inherit

, например:

h2, span.date {
  line-height: 20px;
}

, и вам также может потребоваться установить:

span.date{
   display:block;
}

вот похожий вопрос Вертикально выровнять плавающие DIVs

Answer 5

Я знаю, что многие люди не согласятся, и это немного многословно, но <table> хорошо бы решить эту проблему:

/*CSS Somewhere*/
table {width:100%;}
td {vertical-align:bottom;}

<!--HTML-->
<table border="0" cellspacing="0" cellpadding="0">
  <tr>
   <td align="left">
     <h2>Post 1</h2>
   </td>
   <td align="right">
     <span>Feb...</span>
   </td>
 </tr>
</table>