如何将 HTML div 中的图像列表拟合成二维网格？

Question

编辑：问题已解决。有关详细信息，请参阅我自己的答案。 SO 让我在 2 天内将其标记为答案。

我正在使用 Knockout 使用方形图像列表填充 div。 div 目前的宽度和高度是固定的，但最终会调整大小。我希望图像逐行填满 div。因此，当图像 n 到达 div 宽度的边界时，图像 n+1 环绕到下一行。目前，图像流过 div 的边界以填满整个 window。

当前标记如下：

<div data-bind="foreach: images" width="500" height="500">
    <img data-bind="attr: { src: fileName }">
</div>

我试过 float 和 overflow 到目前为止没有成功。我也试过将图像放在它们自己的 div 中。这些图像展示了我希望在整个 window 中形成网格的环绕行为，而不是在 div 我将它们放入其中。

如何在获得我想要的网格的同时让图像保留在 div 内？这可能仅使用 HTML/CSS 还是需要一些 Javascript？

Answer 1

正如 Daniel Weiner 在他的评论中所说的那样 - 花车是必经之路。添加 display : inline-block; 以保持每个元素对齐。示例：

#container {
  width: 100%;
  background-color: black;
  display: inline-block;
}
.block {
  height: 100px;
  width: 100px;
  background-color: #fff;
  margin: 10px;
  float: left;
}

<div id=container>
  <div class="block">1</div>
  <div class="block">2</div>
  <div class="block">3</div>
  <div class="block">4</div>
  <div class="block">5</div>
  <div class="block">6</div>
  <div class="block">7</div>
  <div class="block">8</div>
</div>

Answer 2

我的问题是我没有指定包含 div 的长度单位。在我原来的标记中，我使用了 HTML 属性 width="500"。将其更改为内联 CSS 并指定长度单位解决了问题，将我的 2D 网格保持在 div 内：style="width: 500px"

除此之外，根据 wahwahwah 的建议，每个图像的包含 div 需要以下样式：float: left;

内联CSS，最终结果是：

 <div data-bind="foreach: images" style="width: 500px">
     <div style="float: left;">
          <img data-bind="attr: { src: fileName }">
     </div>
 </div>

如何将 HTML div 中的图像列表拟合成二维网格？

How to fit a list of images in an HTML div to form a 2D grid?

html

javascript

css

knockout.js