2

我有一组缩略图显示在div. div 的宽度可以根据屏幕大小而有所不同。图像都是固定大小的150px * 150px，内边距为5px. 我希望这些缩略图图像以网格布局排列，并且我希望这些图像相对于外部 div 居中对齐。我可以尝试text-align: center外部 div。

但是这样最后一行中的图像将出现在我希望它们从左侧排列的中心。所以我想在放置图像后计算可用的可用空间并将 apadding-left (=freespace/2)应用于外部 div 以便内容显示为中心对齐。

这是我使用的代码。

CSS

#outer {
    border: 1px solid;
    resize: horizontal;
    overflow: auto;
    width: 700px;
    padding: 0;
}

.inner {
    width: 150px;
    height: 150px;
    background: #ccc;
    padding: 5px;
    display: inline-block;
}

jQuery

$(document).ready(function() {
    $("#position").click(function() {
        var maxCount = Math.floor($("#outer").outerWidth() / $(".inner").outerWidth());
        console.log("maxcount::" + maxCount);
        var freeSpace = $("#outer").outerWidth() - ($(".inner").outerWidth() * maxCount);
        console.log("freeSpace::" + freeSpace);
        $("#outer").css("padding-left", freeSpace / 2);
    });

    $("#text").toggle(function() {
        $("#outer").css("text-align","center");
    },function(){
        $("#outer").css("text-align","left");
    });
});

HTML

<button id="position">
    Adjust position
</button>
<button id="text">
    Toggle text align
</button>
<div id="outer">
    <div class="inner"></div>
    <div class="inner"></div>
    <div class="inner"></div>
    <div class="inner"></div>
    <div class="inner"></div>
    <div class="inner"></div>
    <div class="inner"></div>
</div>

这里有一个演示 - http://jsfiddle.net/userdude/fzjrm/1/

但这并没有像我预期的那样工作，因为内容没有完全居中对齐。可能是逻辑需要一些调整，我无法弄清楚。

4

2 回答 2

3

首先，我建议您$("#outer").innerWidth()在计算时使用maxCount，如果您在容器中也有填充，则只能使用元素的内部部分。

最后，作为您的问题的解决方案，我可以建议您添加

box-sizing: border-box;
-moz-box-sizing: border-box;

到#outerdiv 以保持其宽度。不幸的是，这并没有像我预期的那样工作，从右边比左边有更多的空间。但是还有一个我不明白的奇怪的事情，那些div之间的空白（见截图），我找不到影响这些部分的CSS。我认为这些空间正在影响计算，这就是为什么我得到的left-padding比我们需要的多一点。

这是jsFiddle 链接

在此处输入图像描述

于 2012-08-28T15:21:59.650 回答
0

给你：http: //jsfiddle.net/dan_barzilay/fy494/

我所做的不是将#outer填充更改为左侧，而是freeSpace / 2仅从左侧增加尺寸，我更改了两者padding-right并padding-left通过freeSpace / 4将图像保持在中心。

$("#outer").css({"padding-left": freeSpace / 4, "padding-right": freeSpace / 4});
于 2012-08-28T14:50:00.770 回答