html - 以动态宽度居中多行内联 block

Question

这是 HTML:

<div>
    <div>
        <div>large test <br /> block #1</div>
        <div>large test <br /> block #2</div>
        <div>large test <br /> block #3</div>
        <div>large test <br /> block #4</div>
        <div>large test <br /> block #5</div>
    </div>
</div>

还有 CSS:

div {
    background: #f00;
    text-align: center;
}

div > div {
    display: inline-block;
    margin: auto;
    background: #0f0;
    text-align: left;
}

div > div > div {
    background: #00f;
    display: inline-block;
}

测试:http://jsfiddle.net/wnV3H/ 您可以看到当宽度足够大以将所有内容放在一行中时，它工作正常。但是当内容被包裹成两行或更多时，第二个 div 占据了整个宽度并且没有居中。像这样:

#1 #2 #3 #4 (blank)
#5          (blank)

我想要的是:

(blank) #1 #2 #3 #4 (blank)
(blank) #5          (blank)

不是这个:

(blank) #1 #2 #3 #4 (blank)
(blank)     #5      (blank)

有什么解决办法吗？提前致谢。

Answer 1

要做得比现在更好，就必须使用 javascript。

基本上你必须计算父容器的max-width，计算每个子元素的宽度，将子元素的宽度加在一起，直到达到父容器的最大宽度(移动任何不完全适合下一行的子项)，然后将父项的宽度设置为您刚刚计算的子项宽度的总和

可以看一个demo(使用其他HTML)here ，您可以将该方法应用于您的情况。这很可能比你想做的要多，你必须接受两者之间的微小空间

附带说明一下，类有助于组织您的代码，使其更清晰，并使其不会混淆页面上的类似情况。你应该使用它们