Question

我正在动态生成更多div（具有相同内容的相同大小），并且我希望它们并排并且也将它们居中。

实施例：假设在一行上可以有4个div，我希望它看起来像这样：

1 div：...[]...

2个div：..[][]..

3个div：.[][][].

4个div：[][][][]

5 divs：
[][][][] ...[]...

这可能吗？

我知道你可以用float:left和一个带有width: 100%

的外部容器将多个div放在一行（并让它们换行）

在此测试：http://jsfiddle.net/Tyilo/cD7e3/1/

Answer 1

您需要将所有div放在包装器div中并使用text-align：center;对于包装器div。

编辑：

查看Marty的评论他是对的。你还需要做显示：inline-block;对于内部div。

Answer 2

当然，这是可能的：

http://jsfiddle.net/pRNgH/

我在IE6 / 7中包含了使display: inline-block工作所需的黑客攻击，以获取更多信息：

Inline block doesn't work in internet explorer 7, 6

您需要确保不在.dynamic或this happens之间输出空格。

<强> CSS：

.divHolder {
    width: 400px;
    border: 2px solid red;
    margin: 0 0 16px 0;
    text-align: center
}
.dynamic {
    text-align: left;
    width: 100px;
    height: 50px;
    background: #ccc;

    display: inline-block;
    /* make it work in ie7 */
    *display: inline;
    zoom: 1
}

<强> HTML：

<div class="divHolder">
    <div class="dynamic">2</div><div class="dynamic">2</div>
</div>

Answer 3

根据您的评论修改：

如果您是动态创建它们，那么为什么不能这样做：

parent width = totaldivs * div width;
parent margin: 0 auto;

是否可以将div放在彼此旁边并居中？

3 个答案:

编辑：