动态调整缩略图连续

我有简单的画廊是这样的：动态调整缩略图连续

<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

动态调整缩略图连续

回答

相关问题