javascript - 在网络日历中定位 div 元素的问题

Question

我正在编写一个 html 日历，但在定位 div 时卡住了。我动态生成 div，它们相互堆叠，大多数情况下都可以。有时我需要创建一个 div 并将其放置在页面顶部，就在第一个创建的 div 旁边。如果我使用 float ，它会移动得太远而不会到达顶部。我可以使用 position 来完成这个，但是它变得复杂了。看起来应该很容易将它放到顶部，就像在使用 valign=top 的表中一样。我添加了一些 css 定位来显示我想要 div 的位置，但如果可能的话，我想在没有位置的情况下进行。非常感谢任何有关放置 div 的好方法的建议。

#container{
  width:200px;
  height:200px;
  background-color:blue;
}

#item1{
  width:50px;
  height:50px;
  background-color:red;
}

#item2{
  width:50px;
  height:50px;
  background-color:yellow;
}

#item3{
  width:50px;
  height:50px;
  background-color:green;
  float: right;
  position:relative;
  top:-100px;
  left:-100px;
}

<div id=container>
  <div id=item1></div>
  <div id=item2></div>
  <div id=item3></div>
</div>

Answer 1

我们将日历图 block 称为“源 div”，对于您希望显示在第一个“源 div”右侧的 div，我们将其命名为“目标 div” .

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

.calendar { font-size: 0; }
.src {
  position: relative;
  font-size: 14px;
  display: inline-block;
  width: 30px; height: 30px;
  outline: 1px solid #000;
}
.src:hover:after {
  content: "";
  position: absolute;
  display: block;
  width: 100%; height: 100%;
  left: 100%; top: 0;
  background-color: #ff0000;
}

<div class="calendar">
  <div class="src"></div>
  <div class="src"></div>
  <div class="src"></div>
  <div class="src"></div>
  <div class="src"></div>
  <div class="src"></div>
  <div class="src"></div>
  <br/>
  <div class="src"></div>
  <div class="src"></div>
  <div class="src"></div>
  <div class="src"></div>
  <div class="src"></div>
  <div class="src"></div>
  <div class="src"></div>
  <br/>
  <div class="src"></div>
  <div class="src"></div>
  <div class="src"></div>
  <div class="src"></div>
  <div class="src"></div>
  <div class="src"></div>
  <div class="src"></div>
 </div>

将鼠标悬停在任何源 div 上以查看相应的目标 div。