尝试使用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均匀地分发图像

回答

相关问题