如何在div中动态更改网格？

Question

我需要创建一个居中的正方形网格，里面有文字。使用jQuery帮助用户将能够添加或删除正方形（行和列）。

基本上代码是：

<style>
div.square{
    padding: 5px;
    margin: 5px;
    border: 1px solid green;
    /*display: inline-table; /* IE fail*/
    /*display: inline-block; /* IE fail*/
    float: left;
}
div.row{
    margin: 0 auto;
}
</style>

<div style="width:500px; border:1px solid red; margin: 0 auto">
    <div class="row">
        <div class="square">1</div>
        <div class="square">2</div>
        <div class="square">3</div>
    </div>
    <div style="clear:both"></div>
    <div class="row">
        <div class="square">1</div>
        <div class="square">2</div>
        <div class="square">3</div>
    </div>
    <div style="clear:both"></div>
    <div class="row">
        <div class="square">1</div>
        <div class="square">2</div>
        <div class="square">3</div>
    </div>
    <div style="clear:both"></div>
</div>

最好的方法是什么？

Answer 1

你在寻找这样的东西：

http://jsbin.com/etunuk/1/

1. 浮动元素收缩包装，因此需要附加宽度。
2. 要使浮动元素居中，您需要添加它们的宽度+填充+边距+边框，并将该宽度指定给包装器，在本例中为.row和center .row。

如果删除边框，则需要从行宽中删除宽度，1px * 6，依此类推。