收缩包装和居中内联块元素的容器 [英] Shrink-wrap and center a container for inline-block elements

问题描述

我有一堆inline-block元素在几行，我想水平中心。 inline-block元素都有相同的固定大小，但我想让中心能够处理页面调整大小和添加或删除元素。

I have a bunch of inline-block elements over several lines which I'd like to center horizontally. The inline-block elements all have the same fixed size, but I'd like the centering to be able to handle page resizing and adding or removing elements.

剥离了html / css，并删除了为了清楚的中心的尝试。它位于 http://jsfiddle.net/fe25H/1/

I've stripped down the html/css and removed the attempt at centering for clarity. It's at http://jsfiddle.net/fe25H/1/

如果调整结果窗口的大小，使第三个inline-block元素下降，容器将填充宽度，我们得到这个：

If you resize the results window so that the third inline-block element drops down, the container fills the width and we get this:

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

而不是这样：

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

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

edit based on ptriek's answer regarding a JavaScript solution:

Ptriek的代码是一个有用的起点;它适用于特定情况，但不是一般的。我大部分将其重写为更灵活（请参见 http://jsfiddle.net/fe25H/5/ ）。

Ptriek's code was a useful starting point; it works for the specific case, but not the general one. I've mostly rewritten it to be more flexible (see http://jsfiddle.net/fe25H/5/).

推荐答案

在考虑了一下之后，我同意Wex上面的评论。

After thinking a bit about it, I agree with Wex' comment above.

所以我提出了一个JavaScript解决方案（jQuery） - 我不是一个专家，所以代码可能会改进 - 但我想它确实是你需要的：

So I fiddled a JavaScript solution (jQuery) - I'm not an expert on this, so the code might be improved - but I guess it does exactly what you need:

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/

这篇关于收缩包装和居中内联块元素的容器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！