html - 高さの異なるフローティング要素を揃える

Question

テキストを保持.photo_boxする div を含むいくつかの div があります。.photo_stats_titleテキストが複数の行を占めるようになると、その親 div の高さが.photo_box変わります。これにより、さまざまな.photo_boxdiv が下部に整列されます。

問題:どうすればそれらを上に揃えることができますか? できればjQuery/Javascriptを使わない

JSfiddle: http://jsfiddle.net/ySbjQ/

Answer 1

と を使用display: inline-block;しvertical-align: topてこれらを整列させます。

.photo_box {
    background: #fff;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px; 
    display: inline-block;
    position: relative;
    margin-bottom: 15px;  
    border: 1px solid #ddd;
    vertical-align: top;
}

http://jsfiddle.net/ySbjQ/1/

また、一部の古いブラウザーのサポートが必要な場合は、いくつかの修正についてこちらを確認してくださいhttp://blog.mozilla.org/webdev/2009/02/20/cross-browser-inline-block/

Answer 2

「位置:絶対;」を追加 CSS の .photo_stats_title に。

http://jsfiddle.net/ySbjQ/4/