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) 坐标中的两个正方形。

我期望得到这个：

预期的

但得到了这个：

在此处输入图像描述

为什么？我做错了什么以及如何正确制作它？

PS 'fixed' 而不是 'absolute' 将完成这项工作，但方块不位于父 div 下方，并且不响应滚动。有什么办法可以解决吗？

4

4 回答 4

2

您将结束标签留在了 div 中，因此cell2在内部cell1，因此相对于cell1and not的边缘定位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 个的孩子。

  2. 在中使用 pxwidth: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 回答