0

HTMLページに6*6の入力ボックスの正方形を作成しようとしています。それらを配置するために、私はdivとcssを使用します。

<div class="boxes">
    <div class="box_0_0"><input... ></div>
    <div class="box_0_1"><input... ></div>
    <div class="box_0_2"><input... ></div>
    <div class="box_0_3"><input... ></div>
    ...
    <div class="box_1_0"><input... ></div>
    <div class="box_1_1"><input... ></div>
    ...
</div>

どこ

.boxes { position: relative; }

.box_0_0 { position: relative; float: left; top: 0px; left: 0px; width: 40px; height: 50px; }
.box_0_1 { position: relative; float: left; top: 0px; left: 50px; width: 40px; height: 50px; }
...

.box_1_0 { position: relative; float: left; top: 60px; left: 0px; width: 40px; height: 50px; }
.box_1_1 { position: relative; float: left; top: 60px; left: 50px; width: 40px; height: 50px; }

しかし、結果は正方形の配置ではありません。

ここに画像の説明を入力してください

どうすればこれを達成できますか？

4

4 に答える 4

3

オンと残りの代わりに取り出しfloat: leftて使用します。それは動作しますか？position: absoluteposition: relativebox_0_0

于 2012-05-27T20:35:04.653 に答える
1

私はこれがあなたが望むものだと信じています：http：//jsfiddle.net/KdRre/1/

于 2012-05-27T20:49:48.500 に答える
0

彼らにどのように見せたいか教えてください。すべての正方形が各辺に配置されたチェスパッドのように？

相対div内の要素に相対位置を与える意味はありません-必要に応じて、内部divに絶対位置を与えます。

ボックスを並べて表示しようとしている場合（各ボックスを含めるために順序付けされていないリストを使用する）でも、各行に配置するボックスの数がわかっている場合は、各行の順序付けされていないリストになる可能性があります。

それ以外の場合は、相対位置を削除して左にフロートを配置することもできます。

あなたが問題に直面した場合に備えて私に知らせてください-私はあなたが解決策を得るのを確実に見るでしょう-乾杯！

于 2012-05-27T20:38:14.943 に答える
0

私はこのようなレイアウトを使用します：

<div class="boxes">
    <div class="left_0 top_0 box"><input... ></div>
    <div class="left_1 top_0 box"><input... ></div>
    <div class="left_2 top_0 box"><input... ></div>
    <div class="left_3 top_0 box"><input... ></div>
    <div class="left_0 top_1 box"><input... ></div>
    <div class="left_1 top_1 box"><input... ></div>
    ...
</div>

とCSS：

.boxes { position: relative; }
.box   { position:absolute;width:40px;height:50px; }
.left_0 { margin-left:0px;}
.left_1 { margin-left:50px; }
...
.top_0 { margin-top:0px; }
.top_1 { margin-top:60px; }
于 2012-05-27T20:39:59.637 に答える