0

square

I need to create a centered grid of squares with text inside it. With jQuery help user will be able to add or remove squares (in row and column).

Basically the code would be:

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

What is the best way to do it?

4

1 に答える 1

0

あなたはこのようなものを探していますか：

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

  1. 浮動要素はラップを縮小するため、幅を追加する必要があります。
  2. フローティング要素を中央に配置するには、幅 + パディング + マージン + ボーダーを追加し、その幅をラッパー (この場合は .row と center .row) に割り当てる必要があります。

境界線を削除する場合は、行幅から 1px * 6 などの幅を削除する必要があります。

于 2012-12-12T11:44:31.740 に答える