Question

我想在桌面上显示3列砌体图像网格，在设备上显示单列。以下plunk适用于移动设备，但它在桌面上失败（两个图像之间的差距很大）。我已经尝试设置宽度百分比但没有运气

https://plnkr.co/edit/g75ClJU4VJWgJbfiKYdu?p=preview

.block{
    float: left;
    margin: 2px 2px 2px 2px;
    width: calc(33.33% - 17px);
}

.block img {
    width: 100%;
    height: auto;
}

@media only screen and (max-width: 500px) {
  .block {
      float: left;
      margin-bottom: 25px;
      width: calc(100% - 17px);
  }
}

提前致谢

MSK

Answer 1

您可能只想使用媒体查询并删除RuntimeError: Optimal parameters not found: Number of calls to function has reached maxfev = 800.。

以下设计非常灵活，允许

手机屏幕上的一栏
平板电脑上的两列
小型桌面屏幕/笔记本电脑上的三列
大型桌面上的四列
4k屏幕上的五列。

其余评论都在代码段内。

float

body {
  background: #131418;
}


/* Step 1: start with resetting some defaults */

* {
  margin: 0 auto;
  padding: 0;
  max-width: 100%;
}


/* Step 2: center things inside the grid and clear some space around it by setting a device based max-width and margin*/

.grid {
  text-align: center;
  max-width: 95vw;
  margin: 2.5vw auto;
}


/* Step 3: how big should the gap be between grid items? remember that the total gap between two items would be double what you set here since both would have that amount set as their individual padding. Also add box-sizing:border-box to make sure the padding doesn't affect the total widh of the item */

.grid-item {
  padding: 5px;
  box-sizing: border-box;
}


/* Step 4: Add media queries (subjective) to make the whole grid resposive. */

@media (min-width: 500px) {
  .grid-item {
    width: 50%;
  }
}

@media (min-width: 1000px) {
  .grid-item {
    width: 33.333%;
  }
}

@media (min-width: 1700px) {
  .grid-item {
    width: 25%;
  }
}

@media (min-width: 2100px) {
  .grid-item {
    width: 20%;
  }
}

三列响应式砌体网格

1 个答案: