Question

我有基本需求。

我想要显示的 n 图像。我想在行中显示它们，每行包含3个图像，如果我在计算机上的浏览器上。如果我在移动设备上，我想在列中显示它们，即一个在另一列之下。

我不想使用bootstrap。

目前我正在考虑使用 angular / flex-layout 来管理它，但似乎有一点工作（例如找到除以3的行数等等）。< / p>

我想知道是否有更简单的方法。

Answer 1

使用css媒体查询和flexbox非常容易。

.item {
  width: 50px;
  height: 50px;
  background-color: tomato;
  width: 100%;
  margin: 8px;
}

@media (min-width: 720px) {
  .list {
    display: flex;
    flex-wrap: wrap;
  }
  .item {
    width: calc(33% - 16px);
  }
}

<div class="list">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <!-- however many items you want -->
</div>

Live demo

根据设备显示项目列表，如网格或列

1 个答案: