Question

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

我设法获得了这样一个div，但我最后一个问题是当你添加足够的元素时它会变成两行而不是一行。 Nomatter剩下多少空间，内部容器延伸到整个宽度，而不是像孩子一样宽。

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

在浮动内容周围包装div而不使包装器获得与其自己的父级相同的宽度

1 个答案: