Question

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

教程中的图像较小但我希望它们更大，如：324 x 322 px。他们还制作了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。然后，您可以为周围的margin:0 auto;设置div，它会集中所有内容。您可以向单张图片margin添加一些div，以便为他们提供一些喘息空间。我做了JSFiddle所以你可以直观地看到我的意思。

但是，观察一下。在324px宽度的3幅图像并排时至少为976px。这大于您为页面设置的宽度。也许你指的是一旦点击它们的大小？

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

1 个答案: