Question

我有一个显示一行缩略图的页面，其中任何缩略图都可以包含任意数量的第二行缩略图。我正在尝试让这些第二行缩略图显示在所选的第一行缩略图下方。我正在使用jQuery定位第二行，它适用于this code（注意它不是jsFiddle中的中心，但它在我的网站上）。缩写版本：

HTML：

<div id="main">
<!-- first row -->
<div id="thumbs">
<div class="thumbnail" id="thumb3"><a href=""><img src="http://s27.postimg.org/rdf0s9glr/Chrysanthemum_productthumb.jpg" alt="" border="0" /></a></div>
<div class="thumbnail" id="thumb4"><a href=""><img src="http://s27.postimg.org/rdf0s9glr/Chrysanthemum_productthumb.jpg" alt="" border="0" id="currentimage" /></a></div>
<div class="thumbnail" id="thumb5"><a href=""><img src="http://s27.postimg.org/rdf0s9glr/Chrysanthemum_productthumb.jpg" alt="" border="0" /></a></div>
<div class="thumbnail" id="thumb7"><a href=""><img src="http://s27.postimg.org/rdf0s9glr/Chrysanthemum_productthumb.jpg" alt="" border="0" /></a></div>
</div>
<!-- second row -->
<div id="thumbs2holder">
<div id="thumbs2" style="width:220px">
<div class="thumbnail" id="thumb4"><a href=""><img src="http://s27.postimg.org/rdf0s9glr/Chrysanthemum_productthumb.jpg" alt="" border="0" /></a></div>
<div class="thumbnail" id="thumb4"><a href=""><img src="http://s27.postimg.org/rdf0s9glr/Chrysanthemum_productthumb.jpg" alt="" border="0" /></a></div>
<div class="thumbnail" id="thumb4"><a href=""><img src="http://s27.postimg.org/rdf0s9glr/Chrysanthemum_productthumb.jpg" alt="" border="0" /></a></div>
</div>
</div>
</div><!-- /main -->

CSS：

#main {
    width:100%;
    height:100%;
    text-align:center;
}

#thumbs {
    width:100%;
    height:50px;
    margin-top:15px;
    margin-bottom:5px;  
}

#thumbs2holder {
    width:100%;
    height:50px;
    margin-bottom:5px;
    position:relative;
}

.thumbnail {
    display:inline;
    margin:0 5px 0 0;
}

#currentimage {
    border:2px solid blue;
}

JQUERY：

if ($('#thumbs2holder').length) {

// Get centre point of current first row image (relative to left of window):
var pos = $('#currentimage').position();
var imgwidth = $('#currentimage').width();
var centre = parseInt(pos.left) + (parseInt(imgwidth)/2);

// Get ABSOLUTE centre point of second row:
var numsubthumbs = $('#thumbs2').children().size();
var singlethumbwidth = imgwidth + 5;
var rowwidth = (singlethumbwidth * numsubthumbs)-5;
var absolutesubcentre = rowwidth / 2;

// Now we want 'centre' to equal 'absolutesubcentre'

var margin = centre - absolutesubcentre;
$('#thumbs2').css('margin-left',margin);
}

问题在于，当调整浏览器窗口大小时，第二行缩略图不会随第一行缩略图一起移动 - 即它们应该“胶合”到相关的第一行缩略图。

我哪里错了？

谢谢， ģ

Answer 1

您可以尝试使用媒体查询样式为调整大小的屏幕大小创建单独的样式表，然后将包装类作为容纳缩略图的容器，并将宽度设置为适合您的数量，然后设置属于＆＃34; clear＆＃34;财产例如：明确：两者;或清楚：对;在缩略图上，您还希望将其与Css选择器last-child结合使用，以在屏幕调整大小时将元素推送到底部的下一行。因此，您将使用最后一个子属性来定位该缩略图的最后一个子项

将一行缩略图置于另一行下方

1 个答案: