HTML5 / CSS重新流网格布局

Question

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

我将以下图片放在一起，以帮助我提供帮助：

在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％的imgs将占90％，然后保证金重叠应该是4％的利润率2％，所以8％，总计98％。您可能希望使用20％宽度和4％边距，4横幅和100％。