0

私は、タイトルが下にあるYouTubeビデオのサムネイルのこのギャラリーを持っています。 http://skitch.com/subzane/bqgqw/demo

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

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

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

ありがとうございました

4

3 に答える 3

1

フローティング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/をご覧ください。

于 2009-05-05T17:40:38.157 に答える
0

わかった。さらに何時間もグーグルした後、私は探していたものを見つけました。

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

それは私の問題を解決するdisplay：inline-blockの使用です。

于 2009-05-05T20:23:59.590 に答える
0

高さは実際にどのくらい変化しますか？あまり変化しない場合は、高さを最大の高さに設定しますか？

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

これはインラインブロッククロスブラウザの記事ですが

#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>
于 2009-05-05T18:09:11.410 に答える