利用图像块设计网站

Question

我正在尝试实现一个设计，除了nav之外，还有一段图像填充页面，就像瓷砖一样。但是图片是相册封面，所以通常(除了例外)在宽度和高度上是相等的。

这方面的困难之处在于，我试图在全屏(从宽度角度)来实现这一点，这样图像排列的部分就可以适应用户的个人电脑屏幕大小。目前，HTML看起来如下所示：

<section id="wrapper">
    <section id="cont">
        <section class="row1">
            <div>
                <img src="./img/album/#.jpg" />
            </div>
            <div>
                <img src="./img/album/#.jpg" />
            </div>
            <div>
                <img src="./img/album/#.jpg" />
            </div>
            <div>
                <img src="./img/album/#.jpg" />
            </div>
            <div>
                <img src="./img/album/#.jpg" />
            </div>
        </section>
    </section>
</section>

因此，每个div都被赋予了width: 20%，在整个页面中形成了一个包含5个div的部分，图像是width: 100%，这样它们就可以完整地填充每个div。然后，添加另一个section来创建第二行，依此类推。

我的问题是，我应该如何正确地实现这一点，并以最少的编码(为用户体验)。我试过使用jQuery砌体，但它与我想要的有点不同。有什么建议吗？

*后加

我还想补充一点，其中一些瓷砖将包含文本，但div的大小可能有所不同，即与图像相同，但长度更长。另外，我希望能够通过JS或其他类似的方法为section#cont设置一个高度，这样我就可以在它下面放置一个页脚。

这是目前的设计。我想让它，说，最遥远的专辑封面可以替换为一个彩色的，不同大小的div包含文本，但后面的div将紧紧地适应。

img

Answer 1

我想，试着使用HTML表吧？

Answer 2

我想你要找的是一个网格系统。我推荐http://960.gs。

您还可以尝试使用http://unsemantic.com/，它可以使用百分比而不是固定的列数。

这些方法是将整个页面划分为相等的列。根据css媒体查询窗口的大小，可以选择要使用的列数。因此，通过这样做，您可以自动设置每行显示多少个img。

它可以做到这一切没有任何那些桌子上的东西。调查一下，你可能会喜欢。

Answer 3

也许你在找这个：in fiddle here

css：

section{
    width:100%; 
    clear:both;
}

div{
   width:20%; 
   float:left; 
   background:#e1e1e1;
}

img{
  width:100%; 
  height:100%;
}

html：

<section class="row1">
   <div>
      <img src="http://cdn5.iconfinder.com/data/icons/jeans-pocket-social-media-icon-set/128/facebook.png" />
   </div>
   <div>
      <img src="http://cdn5.iconfinder.com/data/icons/jeans-pocket-social-media-icon-set/128/facebook.png" />
   </div>
   <div>
      <img src="http://cdn5.iconfinder.com/data/icons/jeans-pocket-social-media-icon-set/128/facebook.png" />
   </div>
   <div>
      <img src="http://cdn5.iconfinder.com/data/icons/jeans-pocket-social-media-icon-set/128/facebook.png" />
      <p>This is content for img. This is content for img. This is content for img. This is content for img. This is content for img. This is content for img. </p>
   </div>
   <div>
      <img src="http://cdn5.iconfinder.com/data/icons/jeans-pocket-social-media-icon-set/128/facebook.png" />
   </div>
</section>