html - 将 div 包裹在浮动内容周围，而包装器的宽度与其自己的父级相同

Question

我的问题是我需要能够将包含所有浮动元素的 div 放在另一个 div 中。这需要是动态的。

我已经设法得到这样一个 div，但我剩下的最后一个问题是当你添加足够的元素时，它变成了两行而不是一行。无论剩余多少空间，内部容器都会伸展整个宽度，而不是与其子容器一样宽。

http://jsfiddle.net/qsAUk/16/

<div id="outer">
    <div id="inner">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
</div>

#outer
{
    background-color: blue;
    text-align: center;
}

#inner
{
    display: inline-block;
    overflow: hidden;
    background-color: red;
}

.box
{
    background-color: black;
    margin-left: 10px;
    margin-bottom: 10px;
    width: 60px;
    height: 60px;
    float: left;
}

很快就说明了我的问题。

我有一个一定宽度的外部 div。

我有一个内部 div，它的宽度应该和它的孩子一样，所以我可以把它放在外部的中心。现在它与包裹它的外部 div 具有相同的宽度。

Answer 1

将包含所有浮动元素的 div 居中（我认为您在谈论#outer）将此行添加到您的 css 中：

#outer {
    margin: 0 auto;
}

这是你的小提琴更新：http: //jsfiddle.net/qsAUk/6/