javascript - HTML5/CSS Re-Flow 网格布局

Question

我一直在寻找一种方法来做到这一点，但我还没有遇到任何事情。我所追求的是能够以网格布局显示一系列图片，从左到右然后上下排列。我希望它占用每行可用的尽可能多的空间（同时遵守某些条件，例如图像之间的填充），并且当窗口重新调整大小时，它会自动重新计算图像的位置。

我将以下图形放在一起以帮助帮助我想要达到的目标：

有没有简单的方法在 CSS、HTML5 和/或 JavaScript 中做到这一点？

谢谢，乔希。

Answer 1

“简单”的方式：

img {
    float: left;
}

这是一个jsfiddle。http://jsfiddle.net/Sp3pU/

Answer 2

使用百分比。尝试类似：

#outer{
  height:400px; width:400px;
}
#outer img{
  width:30%; border:0; margin:2%; float:left;
}
#outer #bd{
  clear:left;
}

您的 HTML 可能包括：

<div id='outer'>
  <img src='whatever1.png' alt='whatever1' />
  <img src='whatever2.png' alt='whatever2' />
  <img src='whatever3.png' alt='whatever3' />
  <img src='whatever4.png' alt='whatever4' />
  <img src='whatever5.png' alt='whatever5' />
  <img src='whatever6.png' alt='whatever6' />
  <img src='whatever7.png' alt='whatever7' />
  <img src='whatever8.png' alt='whatever8' />
  <img src='whatever9.png' alt='whatever9' />
  <img src='whatever10.png' alt='whatever10' />
  <img src='whatever11.png' alt='whatever11' />
  <img src='whatever12.png' alt='whatever12' />
  <div id='bd'></div>
</div>

根据需要调整边距。这是 2% 的折扣，因为 3 个 30% 的图像将占据 90%，然后对边距重叠进行处理，这应该是 2% 的 4 个边距，所以总共 98% 是 8%。您可能希望使用 20% 的宽度和 4% 的边距，用于 4 和 100%。