1

好的，我是一个完全的初学者，事实上我还在建立我的第一个网站。我试图在没有 CMS 的情况下通过手动编码来完成这一切，以便尽可能快地尝试和学习。如果这篇文章发错了地方，我深表歉意，并感谢指向正确位置的指针。

在这里，我正在尝试拼凑一些 jQuery，它会自动垂直对齐我的图片库中的缩略图（它们都是不同的大小）。它们在固定大小的 div 内，我尝试的功能如下所示：

<script type="text/javascript">

$('#ul.photo).bind(function() {

var smartVert=$(this);

var phty=ob.("ul.photo img").height(); //get height  of photos

var phtdif=Math.floor(208 - phty); //subtract height of photo from div height

var phttop=Math.floor(phtdif / 2); //gets padding reqd.

$ob.("ul.photo").css({'padding-top' : phttop}) //sets padding to center thumbnail

});

smartVert();

</script>

不出所料，这是行不通的，如果某个好心的人可以同情一个完全的菜鸟，并指出我哪里出错了（可能我的第一个猜测是写完整的胡言乱语），我将不胜感激——即使你可以只需向我指出有关这些事情的教程的方向。我查看并发现一个参考资料说这样的功能很容易创建，但没有详细说明。

4

3 回答 3

1

在这里为你做了一些代码

例如：

html

<div id="yourdiv">
    <img height="200" width="100" src="x" />
    <img height="100" width="100" src="x" />
    <img height="150" width="100" src="x" />
    <img height="300" width="100" src="x" />
</div>​

css

#yourdiv {
    height: 400px;
    background-color: black;
}
#yourdiv img {
    margin: 0 10px;
}

js

$(document).ready(function() {
    var $yourdiv = $("#yourdiv");
    var divHeight = $yourdiv.height();

    $("img",$yourdiv).each(function() {
        var imgElement = $(this);
        var imgPadding = (Math.floor((divHeight-imgElement.height()) / 2));
        imgElement.css('margin-top',imgPadding+'px');
    });
});​

​</p>

编辑：

为了更好地对齐：将您的图像设置为阻止并将它们向左浮动。然后清除您的 div。

编辑2：

使用 for 循环遍历一组对象比使用更快.each

于 2010-05-07T20:31:47.047 回答
0

假设$('#ul.photo')包含多个<img>标签：

 $('#ul.photo img').each(function() {
   var $img = $(this);
   $img.css('padding-top', (208 - $img.height()));
 });
于 2010-05-07T20:37:28.207 回答
0

这是我画廊的CSS：

.contentphoto {
    position:relative;
         width:64%
    margin:auto;
    left:10.375em;
    top:-36.625em;
    background-color: #7EC0EE;
    background-image: none;
    background-repeat: no-repeat;
    background-position:center;
    z-index:1;
}

ul.gallery{
    width: 100%; 
    padding-left: 3.2em;
    margin:  0;
    list-style: none;
}

ul.gallery li {
    float: left;
    width: 200px;           /*Set default width*/
    padding: 0;
    margin: 5px 0;
    display: inline;
}

.photo {
    height: 13em;
    font-size: 1em;
    margin-right: 10px;  /*Creates the 10px gap */
    padding: 20px;
    background: #e3e1d5;
}

.photo img {        /*Flexible image size with border*/
         width: 89%;    /*Took 1% off of the width for IE6 bug*/
         padding: 5%;
    background:#fff;
    margin: 0 auto;
    display: block;
    -ms-interpolation-mode: bicubic;

很抱歉把它放在另一个答案框中，但评论按钮停止工作......

于 2010-05-08T17:14:23.063 回答