HTML5 / CSS回流网格布局 [英] HTML5/CSS Re-Flow Grid Layout

问题描述

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

我将以下图形放在一起，以帮助我想要了解的内容：

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

谢谢，
Josh。

解决方案

easy方式：

  img {
 float：left; 
} 
  

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

I've been looking for a way to do this for some time, and I haven't yet come across anything. What I'm after is to be able to display a series of pictures in a grid layout, ordered from left to right then up and down. I want it to take up as much space as is available on each row (whilst adhering to certain conditions such as padding between images) and when the window is re-sized, it will automatically re-calculate where the images should be positioned.

I put together the following graphic to help aid what I'm trying to get at:

Is there any easy way to do this in CSS, HTML5 and/or JavaScript?

Thanks, Josh.

解决方案

The "easy" way:

img {
    float: left;
}

Here's a jsfiddle. http://jsfiddle.net/Sp3pU/

这篇关于HTML5 / CSS回流网格布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！