動態調整縮略圖連續

我有簡單的畫廊是這樣的：動態調整縮略圖連續

<div class="gallery"> 

<div class="thumbnail"> 

    <img src="1.jpg"> 

</div> 

<div class="thumbnail"> 

    <img src="2.jpg"> 

</div> 

... 

</div>

如何行自動對準thumnbails？從該行

首先縮略圖應對準於從行左，最後對準的正確

保證金應動態地改變。

來源

2015-08-03 Igor

可能重複[CSS flexbox：align-items和align-content之間的差異]（http://stackoverflow.com/questions/31250174/css-flexbox-difference-between-align-items-and-align-content） – klaar

請參閱http： //stackoverflow.com/questions/31250174/css-flexbox-difference-between-align-items-and-align-content，其中'justify-content'應該設置爲'space-between'或'space-around' 。 – klaar

您可以在外箱上使用display: flex。
並根據需要使用所需的所有柔印屬性來顯示內框。

.gallery{ 
    display: flex; 
    flex-direction: row; 
} 

.thumbnail{ 
    flex: 0 0 100px; 
    height: 100px; 
    border: solid gray 3px; 
}

活生生的例子https://jsfiddle.net/m12xcxwy/

上Flexbox的完整的教程：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

來源

2015-08-03 12:00:43 singe3

沒有這些信息，我過得怎麼樣？ – trex005

@ trex005這是CSS3的一個相當新近的功能，它不會在IE瀏覽器中工作，但我在想，但是誰在乎 – singe3

從IE9開始使用廠商前綴-ms-flex。 –

嗨，你可以看到，如果這是按照你的願望

.gallery{ 
 
    display:block; 
 
} 
 
.thumbnail{ 
 
    display:inline-block; 
 
    border:1px solid black; 
 
    float:left; 
 
    height:100px; 
 
    width:100px; 
 
}

來源

2015-08-03 12:18:54

什麼都沒有顯示 – singe3

@ singe3請檢出https://jsfiddle.net/n2oya8eq/ –

'display：inline-block;'這裏不需要使它工作 – singe3

動態調整縮略圖連續

回答

相關問題