0

我正在尝试实现一种设计，除了 之外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 或类似的东西为 section#cont 设置一个高度，这样我就可以在它下面放置一个页脚。

这是当前的设计。我想让它说，最远的专辑封面可以替换为包含文本的彩色、不同大小的 div，但随后的 div 将紧密配合。

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

4

3 回答 3

0

也许你正在寻找这个：在这里小提琴

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>
于 2013-02-27T05:36:23.047 回答
0

尝试使用 HTML 表格，我想？

于 2013-02-27T05:01:32.110 回答
0

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

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

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

它在没有任何这些 table shmables 的情况下完成所有这些。看看它，你可能会喜欢它。

于 2013-02-27T05:09:52.887 回答