containers - 收缩包装并居中放置内联 block 元素的容器

Question

我在几行上有一堆内联 block 元素，我想将它们水平居中。内联 block 元素都具有相同的固定大小，但我希望居中能够处理页面大小调整以及添加或删除元素。

为了清晰起见，我已经剥离了 html/css 并删除了居中尝试。它位于 http://jsfiddle.net/fe25H/1/

如果您调整结果窗口的大小，使第三个内联 block 元素下降，容器会填满宽度，我们会得到:

-----------------BODY------------------
|                                     |
||-------------CONTAINER-------------||
||-INLINEBLOCK---INLINEBLOCK--       ||
|||____________||____________|       ||
||-INLINEBLOCK--                     ||
|||____________|                     ||
||___________________________________||
|_____________________________________|

而不是这个:

-----------------BODY------------------
|                                     |
|   |----------CONTAINER---------|    |
|   |-INLINEBLOCK---INLINEBLOCK--|    |
|   ||____________||____________||    |
|   |-INLINEBLOCK--              |    |
|   ||____________|              |    |
|   |____________________________|    |
|_____________________________________|

根据 ptriek 关于 JavaScript 解决方案的回答进行编辑:

Ptriek 的代码是一个有用的起点；它适用于特定情况，但不适用于一般情况。我主要重写了它以使其更加灵活(参见 http://jsfiddle.net/fe25H/5/ )。

Answer 1

稍加思考后，我同意 Wex 的上述评论。

所以我摆弄了一个 JavaScript 解决方案 (jQuery) - 我不是这方面的专家，所以代码可能会得到改进 - 但我想它完全可以满足你的需要:

var resizeContainer = function () {
    var w_window = $(window).width();
    var w_block = $('.inlineblock').width();
    if (w_window < w_block * 3 && w_window >= w_block * 2) {
        $('.container').width(w_block * 2);
    } else if (w_window < w_block * 2) {
        $('.container').width(w_block);
    }  else {
        $('.container').width(w_block * 3);
    } 
};


$(document).ready(resizeContainer);
$(window).resize(resizeContainer);

body {
    text-align:center;
}
.container {
    display: inline-block;
    background-color: #aaa;
    text-align:left;
}
.inlineblock {
    display: inline-block;
    width: 200px;
    height: 200px;
    background-color: #eee;
}

<div class='container'>
    <div class='inlineblock'></div>
    <div class='inlineblock'></div>
    <div class='inlineblock'></div>
</div>

http://jsfiddle.net/ptriek/fe25H/4/