Question

我正在尝试实现一种设计，除了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个。图片为width: 100%，因此他们会完全填写每个div。然后，我添加另一个section来制作第二行，依此类推。

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

*稍后添加

我还想补充一点，这些图块中的一些将包含文字，但div的大小可能不同，即与图像相同，但长度更长。此外，我希望能够通过JS或类似的东西设置高度到＃cont部分，以便我可以在它下面放置一个页脚。

这是目前的设计。我想这样说，最远的专辑封面可以用包含文字的彩色不同大小的div替换，但后面的div将紧密贴合。

[IMG] http://automaton-hacks.tumblr.com/image/44124223193

Answer 1

我想尝试使用HTML表格吗？

Answer 2

我认为您正在寻找的是网格系统。我推荐http://960.gs。

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

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

如果没有任何这些桌子的优惠，它就可以做到这一切。看看它，你可能会喜欢它。

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>

使用图像切片设计网站

3 个答案:

的CSS：

HTML：