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，计算每个子元素的宽度，将孩子的宽度加在一起，直到达到父母的最大宽度（移动任何孩子的' t完全适合下一行），然后将父级的宽度设置为刚刚计算的子宽度的总和

可以看到演示（使用其他HTML）here，您可以根据自己的情况应用该方法。很可能这比你想做的更多，你必须接受它们之间的微小空间

在旁注中，课程有助于整理代码，使代码更清晰，并且不会使页面上出现类似情况。你应该使用它们

使用动态宽度居中多线内联块

1 个答案: