容器 – 收缩包装并集中用于内嵌块元素的容器

我有一堆内联块元素在几行,我想要水平中心.内嵌块元素都具有相同的固定大小,但我希望中心能够处理页面大小调整和添加或删除元素.

为了清楚起见,我已经删除了html / css并删除了中心的尝试.在http://jsfiddle.net/fe25H/1/

如果调整结果窗口的大小,使第三个内嵌块元素下降,容器将填充宽度,我们得到：

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

而不是这样：

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

基于ptriek关于JavaScript解决方案的回答进行编辑：

Ptriek的代码是一个有用的起点;它适用于具体情况,但不适用于一般情况.我大部分重写它更灵活(见http://jsfiddle.net/fe25H/5/).

解决方法

在想了一下之后,我同意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/

原文地址：https://www.jb51.cc/css/216722.html