Question

我试图创建一个小图片的幻灯片，并在每张幻灯片上水平均匀分布图像。在css-tricks.com上发现interesting technique并且非常直截了当working example但我无法复制它。

这是幻灯片的html

<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>

这是遵循上述技术的css

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;
}

您可以在标题为“OTROS SITIOS”的this site底部看到代码

编辑：我的女朋友试了my code in CodePen，但效果很好。我猜它必须是一些干扰它的全球风格。

感谢您的帮助

Answer 1

我从div网站开始复制html结构，并将其粘贴在CodePen旁边，并附上您提出的css代码。我看到你错过了</a>和<a>

之间的转义字符

当我添加它时，代码完美无缺：）

尝试使用css均匀分布图像

1 个答案: