等間距divs。多行

我有一個頁面上顯示的視頻縮略圖列表。當然，它們不適合一條線，因此使用多條線，我希望它們的間距相等（在其他情況下，佈局看起來破損）。我當前的標記是等間距divs。多行

.thumbs { 
width: 76%; 
float: left; 
margin: 0px 1em; 
text-align: justify; 
background-color: #DEE; 
} 

.thumb { 
display: inline-block; 
text-align: left; 
}

標記是：

  <div class="thumbs"> 
       <div class="thumb"> 
        <img src="http://placehold.it/160x120"> 
        <div class="title">Test</div> 
       </div> 
       <div class="thumb"> 
        <img src="http://placehold.it/160x120"> 
        <div class="title">Test</div> 
       </div> 
       <!-- and so forth... --> 
      </div>

同在的jsfiddle：http://jsfiddle.net/cPm9f/

一切正常，除了最後一行：我希望它是間隔爲以前行，但空間不同:(我不能使用表格或只是填充一堆不可見的存根元素，因爲這是響應式設計的基礎，所以顯示的列數量取決於設備屏幕寬度。

任何想法如何使最後一行的空間與以前的一樣？

UPD：有cimmanon的意見，我想要的應該以不同的方式實施。如果是的話那麼如何？

來源

2012-11-26 Daniel

你必須給它不同的代碼。問題在於工作的合理性。看看用一段文字替換圖像會發生什麼？ http://jsfiddle.net/cPm9f/2/最後一行永遠不會延伸到右側。 – cimmanon

但是我應該怎麼做呢？ – Daniel

你的問題是`text-align：justify'的解釋。最後一行通常是沒有道理的，因爲如果最後一行很短，這些字母就需要有一個荒謬的間隔。

解決方法：

text-align: justify; 
text-align-last: justify;

但是據我所知text-align-last只被IE 支持[編輯：和Mozilla與-moz-text-align-last]，所以讓我們只是假爲他人正當文字的另一行：

.thumbs:after { display: inline-block; width: 100%; content: ""; }

http://jsfiddle.net/TWgDh/

來源

2012-11-27 01:45:42 tobiv

.thumb:last-child { 
    float:right; 
}

？ :)

http://jsfiddle.net/cPm9f/1/

來源

2012-11-26 22:05:27 Calvin

呃沒有。我希望他們左對齊。在其他情況下，這不會是一個問題。 – Daniel

正如上面提到的，你可以使用，但要知道，在last-child CSS僞類不在下面IE9任何IE瀏覽器的支持。我不知道你計劃支持什麼，但值得了解。但是，first-child僞類在早期版本的IE中支持一些。

來源

2012-11-26 22:15:27

我在上面的評論中告訴過，這個解決方案不適合。 – Daniel

等間距divs。多行

回答

相關問題