2009-05-05 94 views
0

我有這個畫廊的縮略圖的YouTube視頻與他們的標題下。 http://skitch.com/subzane/bqgqw/demo縮略圖庫的高度問題

我遇到的問題是,當它們浮動時,它們不會像我喜歡的那樣出現,這是因爲高度是可變的。幾個星期前我已經閱讀了一篇博客文章,解決了這個問題,但是我無法在任何地方找到它。

所以我要求的鏈接到該博客文章或它的真正內容:)

  • 縮略圖高度確實有所不同,我不能將其設置爲一個固定的高度。
  • 每行的拇指數量不同。我無法設定一個固定的號碼。
  • 沒有javasscript修復。只有CSS。

謝謝

回答

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/

+0

問題在於我無法知道新行何時開始。它可能在2件或20件之後。 – 2009-05-05 17:42:24

+0

好的,那麼你試圖做的是什麼?我創建了一個簡單的測試頁面,將div包裝圖像浮動到行(位於容器中)的左側,並且它們都以列格式顯示。我錯過了什麼? – datacop 2009-05-05 17:54:24

0

高度真的會有多大?如果它不會有太大變化,那麼只需將高度設置爲最大值?

對於支持inline-block的瀏覽器:

雖然這裏有一個inline-block cross browser文章

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