Question

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

有时窗口小部件可能会显示在主列中，因此为了让窗口小部件能够轻松适应更宽的空间，我将display属性设置为inline-block。这样，它们可以垂直堆叠在侧栏上，也可以水平堆叠在主柱上。但是，我希望个别贡献者在水平布局时能够分开，所以我添加了10px的边距权。

到目前为止

CSS -

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

所以这就是问题所在 - 当我包含10px的边距时，对于非常小的窗口宽度范围，10px边距会导致窗口小部件折叠成一行两个图片，一个下面，而剩下的照片小部件保持3x3，因为他们没有保证金。

[] [] []

到

[] []

[]

如果水平布局，我会如何让这三组图片有边距，但垂直布局时没有边距？

Answer 1

您可以使用last-child选择器：

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

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

Answer 2

根据您的描述，您的视口会确定布局。您可以使用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;
}

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

2 个答案: