Thumbnail Galerie Höhe Problem

Question

Ich habe diese Galerie von Thumbnails von YouTube-Videos mit ihrem Titel unter. http://skitch.com/subzane/bqgqw/demo

Das Problem, das ich habe, ist, dass, wenn sie schwimmend sie erscheinen nicht als Ich mag, weil die Höhe variabel ist. Ich habe eine Blog-Post zu lesen, genau das Problem vor ein paar Wochen zu lösen, aber ich kann es nicht überall.

Also ich bin für die Verbindung zu dieser Blog-Post zu fragen oder den Inhalt es wirklich:)

• Die Thumbnails Höhe variieren, ich kann das nicht auf einer festen Höhe.
• Die Anzahl der Daumen pro Zeile variieren. Ich kann keine feste Zahl gesetzt.
• keine javasscript Behebungen. nur CSS.

Danke

Answer 1

OK. Nach mehr Stunden googeln fand ich, was ich gesucht hatte.

http: //blog.mozilla. com / webdev / 2009/02/20 / Cross-Browser-inline-block /

Es ist eine Verwendung von Display. Inline-block, dass mein Problem löst

Answer 2

anstelle divs schwimmenden, können Sie Ihre Thumbnails Listen wechseln (was sowieso eigentlich mehr semantisch korrekt ist ..)

Zum Beispiel:

<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>

Für weitere Referenz, unter http://www.alistapart.com/articles/practicalcss/

Answer 3

Wie viel wird die Höhe gehen variieren wirklich? Wenn es nicht viel los variieren dann setzt nur die Höhe des von dem max?

Für Browser, die inline-block unterstützen:

Auch wenn hier ein inline-block Cross-Browser Artikel

#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>