Jquery 用图像块设计网站

我正在尝试实现一种设计，除了

nav

，还有一部分图像填充页面，就像瓷砖一样。但是这些图像是相册封面，所以它们通常（除了例外）在宽度和高度上是相等的

最困难的是，我正试图在全屏（宽度方向）上实现这一点，以便图像排列的区域能够根据用户的PC屏幕大小进行调整。目前，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

s分布在整个页面上。图像的宽度为

width:100%

，因此它们完全填充了每个

div

。然后，我添加另一个

部分

以生成第二行，依此类推

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

---

*后来添加

我还想补充一点，其中一些平铺将包括文本，但div的大小可能不同，即与图像相同，但长度更长。此外，我希望能够通过JS或类似的方式设置节#cont的高度，以便在其下方放置一个页脚

这是目前的设计。我想这样做，比如说，最远的专辑封面可以替换为一个彩色的，不同大小的div，其中包含文本，但随后的div将紧密地适应

---

[img]

我想试试使用HTML表格吧？

我想你要找的是一个网格系统。我推荐

您还可以尝试使用百分比而不是固定列数

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

---

这一切都是在没有桌子的情况下完成的。仔细看看，你可能会喜欢它。

也许你在找这个：

css: html:

这是img的内容。这是img的内容。这是img的内容。这是img的内容。这是img的内容。这是img的内容

我真的没有想过要用表来做这个。谢谢，我试试看！谢谢我两个都试过了，但它们似乎都要求我将宽度设置为960。你有什么建议让我在页面上有一个宽度为100%的部分，但高度取决于每个图像的宽度？在我当前的HTML中，我在将页脚放在网格下面时遇到了问题。网格可以很好地工作。当您使用媒体查询时，您可以将宽度设置为您想要的任何宽度960只是一个名称而不是建议。带页脚的div将位于#wrapper之后。由于您将使用媒体查询，因此每行显示的图像数量是相对的。因此，高度也是相对的，因为不能将它们全部放在一行中。页脚将自动移动。

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

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

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

<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>