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

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

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

但是，我一直在尝试将图像水平堆叠在一行上。如果溢出（几乎总是会发生），则显示为水平滚动条。

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

最佳答案

我将使用带有white-space：nowrap的容器，并将每个吊舱作为内联块：

.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>

关于html - 在HTML/CSS中具有动态列数的行，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48664766/