html - スケーラブルな長さを持つ固定ブロック要素内のテキスト

Question

これが私のjsfiddleです

そして、これがマークアップです（css in fiddle）。

<div class="item">
    <a href="#">
        <span class="title">Short Title </span><br/>
        <span class="date">June 21st, 2013</span>
    </a>
</div>okay, this is good
<br/><br/>
<div class="item">
    <a href="#">
        <span class="title">A title which is medium </span><br/>
        <span class="date">June 21st, 2013</span>
    </a>
</div>still working...
<br/><br/>
<div class="item">
    <a href="#">
        <span class="title">A much longer title than normal to accommodate </span><br/>
        <span class="date">June 21st, 2013</span>
    </a>
</div>yikes, it's being pushed down
<br/><br/>
<div class="item-ideal">
    <a href="#">
        <span class="title">A much longer title than normal to accommodate </span><br/>
        <span class="date">June 21st, 2013</span>
    </a>
</div>how I want it to look in this case

4 つすべてに目を通します。4 番目の div には、理想的なディメンションをハードコーディングする独自のクラスがあります。

これを機能させるための創造的な解決策はありますか? ブロックのタグを同じサイズのままにしたい。

Answer 1

高さの代わりに最小高さを使用する

a{min-height:70px;}

Answer 2

divで垂直方向に中央揃えしたいようです。

これを行う方法は次のとおりです。

CSSで：

 #floater   {float:left; height:50%; margin-bottom:-55px;}
 #content   {clear:both; height:110px; position:relative;}

HTMLで：

 <div id="floater">
 <div id="content">
    Content here
 </div>
 </div>

Answer 3

の を または のいずれかに変更しheightます。amin-heightauto

span内にあるaを別のスパンで囲みます。

display:table;新しいスパンに追加します。

display:table-cellとvertical-align:center;を既存のに追加しaます。

あなたのフィドルで試したときにうまくいきました。もっと時間があればいいのにと思います。=)

Answer 4

必要なサイズを維持し、長さに応じてテキストのサイズを変更する場合は、ここでその質問を参照してください。