javascript - 如何在图像之间留出空间？

Question

我正在使用 Dreamweaver 构建自己的网站。我有一个投资组合页面，其中包含我在本教程中使用的图库:http://www.webdesigntunes.com/coding/jquery-filterable-portfolio/#comment-16950

教程中的图像较小，但我希望它们更大，例如:324 x 322 像素。他们还制作了一个由 4 张图像组成的列，我希望彼此有 3 张图像。但是当我尝试这样做时，我的图像并没有完美地彼此相邻。

这是我的:

<div class="portfolio">

    <article class="entry video">
        <a data-rel="prettyPhoto" href="#">
        <img class="top" src="images/knop-1.jpg" alt="">
        <span class="magnifier"></span>
        </a>
    </article>

(这篇文章 div 为每个新图像重复)

一些CSS:

.portfolio { 

width: 960px;
height:auto;
overflow: hidden;
position: relative;
margin:15px; 

}

.magnifier {



background:url(images/knop-hover1.jpg) no-repeat center;
    width:324px;
    height:322px;
    position:absolute;
    top:10px;
    left:10px;
    bottom:10px;
    right:10px;
    opacity:0;
    -webkit-transition:all .3s ease-in-out;
    -moz-transition:all .3s ease-in-out;
    -ms-transition:all .3s ease-in-out;
    -o-transition:all .3s ease-in-out;
    transition:all .3s ease-in-out;
}

img.top {

position:absolute;
left:0;
right:5px;

}

希望大家帮帮我。谢谢!

Answer 1

您似乎缺少教程中的 JQuery。在它像演示一样工作之前，您需要添加它。我注意到您缺少结束 /div 标签，您的 img 标签应该像这样在末尾自行关闭:/> 而不仅仅是 >。

如果您想要三张图片而不是四张图片，您可以通过将宽度应用到包含各个图片的周围 div 来使它们自动居中。然后周围的 div 需要在更大的内容 div 或主要 div 中。主要的 div 将有一个设置的宽度， float 左边。然后你可以为周围的 div 设置 margin:0 auto; ，它会将所有内容居中。您可以向单个图像 div 添加一些 margin 以给它们一些喘息的空间。我制作了一个代码片段，以便您直观地理解我的意思。

.main {
  width: 700px;
  float: left;
  display: block;
  background: pink;
}

.surrounding {
  width: 510px;
  display: block;
  margin: 0px auto;
}

.single {
  width: 150px;
  float: left;
  margin: 10px;
}

.single img {
  width: 150px;
  height: 150px;
}

<div class="main">
  <div class="surrounding">
    <div class="single">
      <img class="top" src="http://www.wallpaperfunda.com/wp-content/uploads/2014/03/images-2.jpg" alt="" />
    </div>
    <div class="single">
      <img class="top" src="http://www.wallpaperfunda.com/wp-content/uploads/2014/03/images-2.jpg" alt="" />
    </div>
    <div class="single">
      <img class="top" src="http://www.wallpaperfunda.com/wp-content/uploads/2014/03/images-2.jpg" alt="" />
    </div>
  </div>
  <div class="surrounding">
    <div class="single">
      <img class="top" src="http://www.wallpaperfunda.com/wp-content/uploads/2014/03/images-2.jpg" alt="" />
    </div>
    <div class="single">
      <img class="top" src="http://www.wallpaperfunda.com/wp-content/uploads/2014/03/images-2.jpg" alt="" />
    </div>
    <div class="single">
      <img class="top" src="http://www.wallpaperfunda.com/wp-content/uploads/2014/03/images-2.jpg" alt="" />
    </div>
  </div>
</div>

不过，这是一个观察。 3 张宽度为 324 像素的图像并排放置时至少为 976 像素。这大于您为页面设置的宽度。也许您指的是点击后的尺寸？