Html CSS仅在水平显示时元素之间的间距

我有一个小部件组件，可以动态生成一个顶级照片贡献者列表。通常它位于侧边栏中，因此它将前三名照片贡献者堆叠在一起，每个贡献者都有一个由三张照片组成的网格。该布局类似于其他以3x3网格显示其内容的照片小部件

有时小部件可能显示在主列中，因此为了使小部件能够适应更宽的空间，我将display属性设置为inline block。这样，它们就可以垂直堆放在侧栏上，水平堆放在主栏上。然而，我希望在水平布局时，各个贡献者之间能够分开，所以我添加了一个10px的右边距

CSS至今-

div {
  display: inline-block;
  margin-right: 10px;
}

所以问题就来了——当我把10px的边距包括在内时，对于一个非常小的窗口宽度范围，10px的边距会导致小部件折叠成一行两张图片，一张图片在下面，而其余的照片小部件保持3x3，因为它们没有边距

[…]

到

[][]

[]

---

如何使这三张图片的组在水平放置时有边距，而在垂直放置时没有边距？

您可以使用

最后一个子项
选择器：

div {
  display: inline-block;
  margin-right: 10px;
}

div:last-child {
  margin-right: 0
}

根据您的描述，视口决定布局。可以使用CSS3根据视口大小控制布局

@media(max-width:679px) {
#img-group{
     display: block;
     margin: 0;
}
@media only screen and (min-device-width: 680px)   and (max-device-width: 960px),  only screen and (min-width: 680px) and (max-width:  960px) {
     display: inline-block;
     margin-right: 10px;
}

你能为我们提供一个JSFIDLE来复制你的问题吗？这样可以更容易地测试、更新并为你提供答案。或者减少你的小部件的宽度，或者增加你的容器的大小？虽然这肯定只会给我元素之间的余量，它无法解决任何元素在侧边栏中垂直堆叠时没有边距的问题：/