Javascript 在web日历中定位div元素的问题

我正在写一个html日历，在定位div时遇到了麻烦。我动态地生成div，它们彼此堆叠在一起，这在大多数情况下都是正常的。有时我需要创建一个div，并将其放置在页面顶部第一个创建的div的旁边。如果使用float，它会移动过远而不会移动到顶部。我可以利用这个位置来完成这项工作，但它会变得复杂。看起来应该很容易将它放到顶部，就像使用valign=top在表中一样。我添加了一些css定位来显示我想要div的位置，但是如果可能的话，我希望不使用定位。如果您能提供任何关于如何定位div的建议，我们将不胜感激

#容器{
宽度：200px；
高度：200px；
背景颜色：蓝色；
}
#项目1{
宽度：50px；
高度：50px；
背景色：红色；
}
#项目2{
宽度：50px；
高度：50px；
背景颜色：黄色；
}
#项目3{
宽度：50px；
高度：50px；
背景颜色：绿色；
浮动：对；
位置：相对位置；
顶部：-100px；
左：-100px；
}

---

也许您应该考虑在单元格中使用网格布局。您可以更好地控制内容在单元格中的显示方式，而不必使用浮动div。此外，网格容器中的布局可以使内容保持统一，并防止重叠

网格模板列：自动

如果您只希望顶部有两列，只需将其更改为

网格模板列：自动

这里有一个链接

及



#容器{
宽度：200px；
高度：200px；
背景颜色：蓝色；
显示：网格；
网格间距：2px；
网格模板列：自动；
网格模板行：60px自动；
}
#项目1{
宽度：50px；
高度：50px；
背景色：红色；
}
#项目2{
宽度：50px；
高度：50px；
背景颜色：黄色；
}
#项目3{
宽度：50px；
高度：50px；
背景颜色：绿色；
}
让我们将日历平铺称为“源div”，对于希望显示在第一个“源div”右侧的
div，我们将其称为“目标div”

我建议您将目标div定位在源div的内部。这种语义关系将使正确定位目标div变得非常容易，使用
left:100%：


.calendar{font size:0；}
.src{
位置：相对位置；
字体大小：14px；
显示：内联块；
宽度：30px；高度：30px；
外形：1px固体#000；
}
.src:悬停：在{
内容：“；
位置：绝对位置；
显示：块；
宽度：100%；高度：100%；
左：100%；顶部：0；
背景色：#ff0000；
}





关于定位div
是否有您想要的示例？我设置了第三个div的定位，以显示我需要它结束的位置。我显然可以用css的位置来做，但是我想在第一个div的左边创建一个div是很容易的。请提供一个图形演示您所说的
的意思，以显示我需要它在哪里结束
，因为这根本不能说明系统的预期行为。如果您想自然地将一个
div与另一个
相对定位您最好在两个
div
s之间建立一些独特的语义关系。在这种情况下，您可以将绿色的
div
放在红色的
div
内，并使用
位置：绝对；左：100%
移动绿色的
div
直到它完全相邻…请注意，在IE11中使用此选项需要是
-ms网格列：auto