Question

我正在寻找一种以表格/表格形式呈现N个图像的方法问题是，它需要处理窗口调整大小或不同的分辨率并重新安排自己。我可以在我的项目中使用JQuery，但如果可能的话，可以避免它当然会更好。

Answer 1

我知道你说你宁愿不使用JQuery，但是我可能想看看使用Twitter Bootstrap，它可以让你直接用流体网格系统开箱即用在很短的时间内我相信你可以下载一个自定义的Bootstrap版本，如果你想要一个只处理网格的精简版本。

http://twitter.github.com/bootstrap/scaffolding.html#fluidGridSystem

Answer 2

您可以使用float和一些@media来获得结果，我准备了一个小小的演示文稿：http://jsfiddle.net/sandro_paganotti/A6n9n/1/

关键在CSS中：

CSS

img{ width: 33%; display: block; float: left; }

@media all and (max-width: 450px){ img{ width: 50% } }
@media all and (min-width: 550px){ img{ width: 20% } }

Answer 3

当父元素调整大小时，图像会自然重排。

http://codepen.io/cimmanon/pen/dwbHi

现在，如果您希望均匀分布元素之间的间距，Flexbox可以帮助您：

http://codepen.io/cimmanon/pen/iHGCd

.gallery {
  margin: -5px;
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-flex-pack: justify;
  -ms-flex-pack: justify;
  flex-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-flex-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
@supports (flex-wrap: wrap) {
  .gallery {
    display: flex;
  }
}

.gallery img {
  margin: 5px;
}

<div class="gallery">
    <img src="http://placehold.it/200x100" /><!--
    --><img src="http://placehold.it/200x120" /><!--
    --><img src="http://placehold.it/200x100" /><!--
    --><img src="http://placehold.it/200x100" /><!--
    --><img src="http://placehold.it/200x140" /><!--
    --><img src="http://placehold.it/200x100" /><!--
    --><img src="http://placehold.it/200x100" /><!--
    --><img src="http://placehold.it/200x130" /><!--
    --><img src="http://placehold.it/200x100" /><!--
    --><img src="http://placehold.it/200x100" /><!--
    --><img src="http://placehold.it/200x100" /><!--
    --><img src="http://placehold.it/200x90" />
</div>

目前的浏览器支持：Chrome，Opera，IE10。 http://caniuse.com/#feat=flexbox

或者，您可以使用CSS Columns（与上面相同的标记）：

http://jsfiddle.net/qeZaZ/

.gallery {
    -webkit-columns: 250px;
    -moz-columns: 250px;
    columns: 250px;
    text-align: center;
}

灵活的图像表

3 个答案:

CSS