在HTML / CSS中具有动态列数的行

Question

我有一个Razor页面，在垂直堆栈中显示一组缩略图：

@foreach (var photo in Model)
{
    <div>@photo.PhotoId</div>
    <div>@photo.Title</div>
    <div>
        <img src="@photo.LargeSquareThumbnailUrl" alt="Many cups!" />
    </div>
}

然而，我一直试图做的是将图像水平堆叠在一行上。如果它溢出（它几乎总是会这样做），那么用水平滚动条显示。

我想我会处理CSS中的溢出，但我无法弄清楚如何堆叠图像。有人可以帮忙吗？

Answer 1

我会使用带有空格的容器：nowrap并将每个pod作为内联块：

.container {
  white-space: nowrap;
  overflow: auto;
  max-width: 100%;
}

.wrapper {
  display: inline-block;
  white-space: normal;
}

<div class="container">
  <div class="wrapper">
    <div>@photo.PhotoId</div>
    <div>@photo.Title</div>
    <div>
      <img src="http://via.placeholder.com/150x150" alt="Many cups!" />
    </div>
  </div>
  <div class="wrapper">
    <div>@photo.PhotoId</div>
    <div>@photo.Title</div>
    <div>
      <img src="http://via.placeholder.com/150x150" alt="Many cups!" />
    </div>
  </div>
  <div class="wrapper">
    <div>@photo.PhotoId</div>
    <div>@photo.Title</div>
    <div>
      <img src="http://via.placeholder.com/150x150" alt="Many cups!" />
    </div>
  </div>
  <div class="wrapper">
    <div>@photo.PhotoId</div>
    <div>@photo.Title</div>
    <div>
      <img src="http://via.placeholder.com/150x150" alt="Many cups!" />
    </div>
  </div>
  <div class="wrapper">
    <div>@photo.PhotoId</div>
    <div>@photo.Title</div>
    <div>
      <img src="http://via.placeholder.com/150x150" alt="Many cups!" />
    </div>
  </div>
  <div class="wrapper">
    <div>@photo.PhotoId</div>
    <div>@photo.Title</div>
    <div>
      <img src="http://via.placeholder.com/150x150" alt="Many cups!" />
    </div>
  </div>
  <div class="wrapper">
    <div>@photo.PhotoId</div>
    <div>@photo.Title</div>
    <div>
      <img src="http://via.placeholder.com/150x150" alt="Many cups!" />
    </div>
  </div>
  <div class="wrapper">
    <div>@photo.PhotoId</div>
    <div>@photo.Title</div>
    <div>
      <img src="http://via.placeholder.com/150x150" alt="Many cups!" />
    </div>
  </div>
  <div class="wrapper">
    <div>@photo.PhotoId</div>
    <div>@photo.Title</div>
    <div>
      <img src="http://via.placeholder.com/150x150" alt="Many cups!" />
    </div>
  </div>
  <div class="wrapper">
    <div>@photo.PhotoId</div>
    <div>@photo.Title</div>
    <div>
      <img src="http://via.placeholder.com/150x150" alt="Many cups!" />
    </div>
  </div>
</div>