如何布局图片库？答案

【问题标题】：How to layout a image gallery?如何布局图片库？
【发布时间】：2012-11-19 06:11:02
【问题描述】：

我正在制作一个图片库，我需要以网格状布局显示图片。我不想使用任何框架，更愿意从头开始做事。另外，我不希望在布局中使用表格，因为动态地将图像添加到表格中会很痛苦。

布局由 div 组成，例如：

<div id="gallery">
   <div class="uPic">
      <img src="1.png">
      <p> description </p>
   </div>
   <div class="uPic">
      <img src="2.png">
      <p> description </p>
   </div>
      ....
......
....
</div>

为了实现网格外观，我只是将所有 .uPics 都“浮动”到左侧......并为#gallery 提供了一些填充和边距。到目前为止，一切都很好。

当我尝试为图像提供悬停效果时，问题就开始了。最初 <p> 是隐藏的，我使用 jQuery 在悬停时显示它。但是这样做时，我悬停的图像下方的图像会向右移动而不是向下移动。有什么想法吗？

【问题讨论】：

你也许可以从相当不错的ZenPhoto 中的可用主题中获得一些想法——不建议你使用整个 ZenPhoto，只要抓住它，看看一些默认的主题文件夹中的主题；那里的布局/CSS 中有很多好主意。
也许您可以尝试将您的代码放在jsfiddle.net 上，以便为我们提供问题的真实示例

标签： css image gallery

【解决方案1】：

如果您的 div 的高度是可变的，那么我建议在每个新行的第一个元素上使用 clear:both 或将每一行放在自己的容器 div 中。否则，正如您所注意到的，所选 div 下的 div 可能会被推到较高 div 的一侧，而不是向下移动。

我还考虑了 Matt 的解决方案，因为 div 在鼠标悬停时四处移动，恕我直言，页面看起来非常混乱。

但是，如果您打算这样做，请查看以下示例：

<html>
<head>

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

  <script type="text/javascript">
    $(document).ready( function() {
      $('#gallery .image p').hide();
      $('#gallery .image').hover(
        function() { $(this).find('p').show() },
        function() { $(this).find('p').hide() }
      );
    });
  </script>

  <style>
    #gallery {
      width: 800px;
    }
    #gallery .image {
      width: 200px;
      float: left;
      background: #eee;
      margin-bottom: 10px;
    }
    #gallery .image.newline {
      clear: both;
    }
    #gallery .image .placeholder {
      width: 180px;
      height: 200px;
      margin: 10px;
      background: #ccf;
    }
    #gallery .image p {
      margin: 10px;
      background: #fcc;
    }
  </style>

</head>
<body>

  <div id="gallery">
    <div class="image">
      <div class="placeholder"></div>
      <p>My description</p>
    </div>
    <div class="image">
      <div class="placeholder"></div>
      <p>My description</p>
    </div>
    <div class="image">
      <div class="placeholder"></div>
      <p>My description</p>
    </div>
    <div class="image">
      <div class="placeholder"></div>
      <p>My description</p>
    </div>

    <!-- NOTE the added "newline" class where the new line starts! -->
    <div class="image newline">
      <div class="placeholder"></div>
      <p>My description</p>
    </div>
    <div class="image">
      <div class="placeholder"></div>
      <p>My description</p>
    </div>
    <div class="image">
      <div class="placeholder"></div>
      <p>My description</p>
    </div>
  </div>

</body>
</html>

【讨论】：

使用 clear both 的问题是我在画廊旁边有一个浮动面板，如果我清除浮动，画廊将被推到面板下方。
我通常通过使用更多容器来解决这个问题。将画廊 div 放在另一个 div 中，您使用的任何清除都应该只影响容器 div 内的其他元素，而不是“侧边栏”。看看这个例子：jsfiddle.net/Fem5v

【解决方案2】：

w3schools 有一个 sample 的图片库，全部使用 CSS。他们在图像悬停时添加边框。

【讨论】：

【解决方案3】：

我可能会设置段落的宽度和高度，并使用相对于封闭 uPic div 的绝对定位来修复它。这样，您可以让描述段落出现在悬停时的图像“上方”，而不会干扰流程。因此，将position: relative; 添加到uPic，将position: absolute; left: 0px; top: 0px; 的内容添加到<p>，然后调整其他内容以适应。

【讨论】：

【解决方案4】：

我建议你为你的 div 选择一个固定的高度和宽度：

它可能会解决您的问题
当整个网格移动时只是为了显示一点描述，无论是向下还是向右，对用户来说并不方便

【讨论】：

【解决方案5】：

我认为这可能会有所帮助

<style type="text/css" ><!--
#gallery_box{

width:728px;

height:545px;

 border:solid #cccccc 1px;

 margin:20px auto 0px;

 padding:5px;

 -moz-box-shadow:0px 18px 40px #ccc;

 -webkit-box-shadow:0px 14px 40px
#ccc;

 box-shadow:0px 5px 30px #ccc;

}
#thumbnail{

 width:160px;

 height:160px;

 background:#f6f6f6;

 border:solid #cccccc 1px;

 border:solid #cccccc 1px;

 margin:5px;

 padding:5px;

 float:left;

 text-align:center;

 position: relative;

 line-height: 156px;

 -moz-box-shadow:4px 4px 4px
#ccc;n-webkit-box-shadow:4px 4px 4px #ccc; box-shadow: 4px 4px 4px #ccc; } img {

 border:none;

 -moz-box-shadow:0px 8px 10px #ccc;
-webkit-box-shadow:0px 8px 10px #ccc; box-shadow: 0px 8px 10px #ccc; }  

a{

 color:#0066FF; text-decoration:none;
} a:hover{

 color:#0099FF; }  
--></style><pre>

<div id="gallery_box" >
   <div id="thumbnail">
<a   href="" ></a>
   </div>  
</div>

【讨论】：