サムネイルギャラリーの高さの問題

Question

YouTubeビデオのサムネイルのギャラリーとそのタイトルがあります。 http://skitch.com/subzane/bqgqw/demo

私が抱えている問題は、高さは可変であるため、浮かせたとき、私が思うように表示されないことです。数週間前にその問題だけを解決したブログ記事を読みましたが、どこにも見つかりません。

だから、私はそのブログ投稿へのリンクまたはその内容を本当に求めています：）

• サムネイルの高さはさまざまです。これを固定の高さに設定することはできません。
• 行ごとのサムの数は異なります。固定番号を設定できません。
• javasscriptの修正はありません。 CSSのみ。

ありがとう

Answer 1

OK。数時間のグーグル検索の後、探していたものを見つけました。

http：//blog.mozilla。 com / webdev / 2009/02/20 / cross-browser-inline-block /

これはディスプレイの使用です：インラインブロックは私の問題を解決します。

Answer 2

フローティングdivの代わりに、サムネイルをリストに切り替えることができます（これは実際にはより意味的に正確です。）

例：

<style type="text/css">

ul {
    list-type: none;
}

li {
    display: inline;
}
li img {
    vertical-align: top;
    margin-left: 5px;
    padding-bottom: 5px;
}

</style>

<div style="width: 280">
    <ul>
    <li><img src="th1.gif" /></li>
    <li><img src="th2.gif" /></li>
    <li><img src="th3.gif" /></li>
    <li><img src="th1.gif" /></li>
    <li><img src="th2.gif" /></li>
    <li><img src="th3.gif" /></li>
    <li><img src="th1.gif" /></li>
    <li><img src="th2.gif" /></li>
    <li><img src="th3.gif" /></li>
    <li><img src="th1.gif" /></li>
    <li><img src="th2.gif" /></li>
    </ul>
</div>

詳細については、 http://www.alistapart.com/articles/practicalcss/ <にアクセスしてください。 / a>

Answer 3

身長は実際にどれくらい変化しますか？それほど変化しない場合は、高さを最大値に設定するだけですか？

インラインブロックをサポートするブラウザーの場合：

ここにインラインブロッククロスブラウザがあります記事

#thumbsWrapper div{display:inline-block;vertical-align:top;margin:20px;border:solid 1px #f00;width:180px;}

<div id="thumbsWrapper">
  <div style="height:180px;">
    <img src="thumbnail1.gif" />
  </div>
  <div style="height:240px;">
    <img src="thumbnail2.gif" />
  </div>
  <div style="height:210px;">
    <img src="thumbnail3.gif" />
  </div>
  <div style="height:100px;">
    <img src="thumbnail4.gif" />
  </div>
  <div style="height:300px;">
    <img src="thumbnail5.gif" />
  </div>
  <div style="height:100px;">
    <img src="thumbnail6.gif" />
  </div>
</div>