テキストが左に整列し、異なる高さと同じ行

Question

に右揃えに別のテキストは、私はこのコード

<div> 
 
    <div style="float:left"> 
 
     <h2>header</h2> 
 
    </div> 
 
    <span style="float:right; vertical-align: bottom"> 
 
      text2 
 
    </span> 
 
    <div class="clear:both"></div> 
 
</div>

を持っています親の底辺div。

どうすればよいですか？

Answer 1

かなり奇妙なHTMLコードですが、ここではHTMLは変更されませんソリューションです：

は（PS：あなたはspanはないh1 WTH、親DIVの下に合わせる必要があることを尋ねた場合。あなたがそれらを与える必要があり、後者を望んで両方同じmargin-bottomとpadding-bottom。）

div:first-of-type { 
 
position: relative; 
 
overflow: hidden; 
 
} 
 
span { 
 
display: block; 
 
position: absolute; 
 
right: 0; 
 
bottom: 0; 
 
}

<div> 
 
    <div style="float:left"> 
 
     <h2>header</h2> 
 
    </div> 
 
    <span style="float:right; vertical-align: bottom"> 
 
      text2 
 
    </span> 
 
    <div class="clear:both"></div> 
 
</div>

Answer 2

Pあなたはh2以来、あなたが使用している要素を変更することを考慮する必要があります、そして、spanは、同じデフォルトのユーザエージェントスタイルを持っていません。 h2はスパンよりも大きく/大きく表示され、スパンはより明るく表示されます。あなたは本当にこのために探している場合https://jsfiddle.net/pze8xgu0/（わからない：あなたはそれがこの

`<div style="float:left"> 
    <h2>header</h2> 
</div> 
<div style="float:right; vertical-align: bottom"> 
     <h2> text2</h2> 
</div> 
<div class="clear:both"></div>`