Question

我想要在div中均匀分布一系列图像。我已经看到很多与此类似的问题并且有很好的答案，但是很多人使用填充/边距来实现这一点，这会在包含div的左右边缘留下空白。

现在我正在为每个图像应用一个边距权限，除了最后一个图像外，它的右侧有一个丑陋的空白区域。我可以在没有边距的情况下对最后一个图像应用不同的类，但我希望有一个更清晰的解决方案。我还有其他选择吗？

#photo_bar {
    margin-bottom:15px;
    width:785px;
}

#photo_bar a {
    margin-right:7px;
}

.photo_bar_image {
    border-radius:9px;
    background-size: 125px;
    display: inline-block;
    width: 125px;
    height: 125px;
    text-decoration: none;
    transition: background-size 0.2s, background-position 0.2s;
}

.photo_bar_image:hover {
    background-size:140px;
    background-position: -5px -5px;
}

<section id='photo_bar'>
    <a class='photo_bar_image'></a>
    <a class='photo_bar_image'></a>
    <a class='photo_bar_image'></a>
</section>

Answer 1

这个怎么样？

img:last-child {
   // change the margin here!
}

这将应用于容器中的最后一个图像元素！

更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/:last-child

在容器中分发图像

1 个答案: