收缩包装并居中放置行内块元素的容器

小编典典

收缩包装并居中放置行内块元素的容器

css

我有几行要在行中居中放置的inline-block元素，我想水平居中。内联块元素都具有相同的固定大小，但我希望居中处理页面大小调整以及添加或删除元素。

为了简化起见，我删除了html /css并删除了居中的尝试。

如果您调整结果窗口的大小，以便第三个内联块元素下降，则容器将填充宽度，我们将得到以下结果：

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

而不是这样：

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

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

Ptriek的代码是一个有用的起点。它适用于特定情况，但不适用于一般情况。

阅读 262

2020-05-16

共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>

2020-05-16