在网格布局中排列图像

Question

我有一组缩略图在div中显示。 div的宽度可以根据屏幕大小而变化。图像的大小均为150px * 150px，填充为5px。我希望这些缩略图图像以网格布局排列，并且我希望这些图像相对于外部div居中对齐。我可以在外部div上尝试text-align: center。

但是这样，最后一行中的图像将出现在中心，我希望它们从左边排列。所以我考虑在放置图像后计算可用空间，并将padding-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/

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

Answer 1

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

最后，为了解决您的问题，我建议您添加

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

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

以下是jsFiddle link

Answer 2

在这里：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});