嘗試使用css均勻地分發圖像

我試圖創建一張小圖像的幻燈片，每張幻燈片上的圖像均勻地水平分佈。在css-tricks.com上發現了一個interesting technique，並且一個非常直接的working example，但我一直無法複製它。嘗試使用css均勻地分發圖像

這裏有一個幻燈片

<div class="item active"> 
    <div> 
    <a href="#"><img src="http://placehold.it/100x100"></a> 
    <a href="#"><img src="http://placehold.it/100x100"></a> 
    <a href="#"><img src="http://placehold.it/100x100"></a> 
    <a href="#"><img src="http://placehold.it/100x100"></a> 
    <a href="#"><img src="http://placehold.it/100x100"></a> 
    <a href="#"><img src="http://placehold.it/100x100"></a> 
    <a href="#"><img src="http://placehold.it/100x100"></a> 
    </div> 
</div>

這裏的精選以下所提到的技術

div.sites .carousel-inner .item div { 
    font-size: 0.1px; 
    text-align: justify; 
} 

div.sites .carousel-inner .item div:after { 
    content: ""; 
    width: 100%; 
    display: inline-block; 
} 

div.sites .carousel-inner .item div a { 
    display: inline-block; 
}

你可以看到代碼在this site下工作，標題下的「OTROS SITIOS」的CSS的HTML

編輯：我的女朋友試過my code in CodePen，它工作的很好。即時猜測它必須是一些干擾它的全球風格。

感謝您的幫助

來源

2013-05-08 kumiau

很難分辨出你所要求的是什麼，但改變'的text-align：justify'到'text-align：center'使100x100圖像列表全部居中...？之後，滑塊工作得非常好。 – mash 2013-05-08 04:21:15

我想要做的是讓圖像在水平空間中均勻分佈。就像當你證明所有文字分佈在文字上的文字一樣。你可以檢查問題中的工作示例，看看我試圖做什麼的演示。 – kumiau 2013-05-08 04:25:23

我複製從DIV網站開始HTML結構和粘貼它CodePen以及您的建議CSS代碼。我看到你錯過了</a>和<a>

當我將它的轉義字符，代碼工作完美:)

來源

2013-05-08 19:49:23 ZePoLiTaT

嘗試使用css均勻地分發圖像

回答

相關問題