2

div を必要な正確な場所 (ピクセル単位) に移動しようとしています (座標は親の div を基準にする必要があります)。

私はこれを書いてみました：

<body>
    <div id="desk" style="position: absolute; width:400; height:400; background-color:blue;" >
        <div id="cell1" style="position: absolute; left: 51px; top: 1px; width: 48px; height: 48px; color:black; background-color:black;" />
        <div id="cell2" style="position: absolute; left: 1px; top: 51px; width: 48px; height: 48px; color:black; background-color:black;" />
    </div>
</body>

(51,1) 座標と (1,51) 座標の 2 つの正方形を次に示します。

私はこれを得ると思っていました：

期待される

しかし、これを得ました：

ここに画像の説明を入力

なんで？私が間違っていることと、それを適切に作成するにはどうすればよいですか?

PS「固定」ではなく「絶対」が機能しますが、正方形は親divの下に配置されず、スクロールに応答しません。それを修正する方法はありますか？

4

4 に答える 4

2

終了タグを div から外したままにしたため、cell2は内側cell1にあるため、 および のエッジに対して配置されてcell1いませんdesk。

HTML で XML 自己終了タグ構文を使用することはできません。

于 2012-10-26T15:22:09.050 に答える
2

DIV タグを適切に閉じる必要があります。

<body>
    <div id="desk" style="position: absolute; width:400; height:400; background-color:blue;" >
        <div id="cell1" style="position: absolute; left: 51px; top: 1px; width: 48px; height: 48px; color:black; background-color:black;"></div>
        <div id="cell2" style="position: absolute; left: 1px; top: 51px; width: 48px; height: 48px; color:black; background-color:black;"></div>
    </div>
</body>

フィドルの例

于 2012-10-26T15:24:35.983 に答える
2

これは私のために働く：

<div id="desk" style="position: relative; width:400px; height:400px; background-color:blue;" >
    <div id="cell1" style="position: absolute; left: 51px; top: 1px; width: 48px; height: 48px; color:black; background-color:black;"></div>
    <div id="cell2" style="position: absolute; left: 1px; top: 51px; width: 48px; height: 48px; color:black; background-color:black;" ></div>
</div>

  1. <div>タグを閉じます。2 番目の div は 1 番目の div の子であると考えます。

  2. px を使用するwidth:400px; height:400px;

于 2012-10-26T15:24:39.900 に答える
1

ここにフィドルがあります：http://jsfiddle.net/GvQ3x/

div（<div></div>の代わりに<div />）タグを閉じ、pxコンテナのdivサイズを設定するときに（または他のものを）使用します

于 2012-10-26T15:23:35.780 に答える