在網絡日歷中定位 div 元素的問題

Question

我正在編寫一個 html 日歷並被卡在定位 div 上。 我動態生成 div 並且它們堆疊在彼此的頂部，這在大多數情況下是可以的。 有時我需要創建一個 div 並將其放置在頁面頂部的第一個創建的 div 旁邊。 如果我使用浮動，它會移動得太遠並且不會到達頂部。 我可以使用位置來完成這個，但它變得復雜。 似乎應該很容易將它放到頂部，就像在使用 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

也許您應該考慮在單元格中使用網格布局。 您可以更好地控制內容在單元格中的顯示方式，而無需使用浮動 div。此外，網格容器中的布局可以使事情保持統一並防止重疊使用

grid-template-columns: auto auto auto;

如果您只想要頂部的 2 列，只需將其更改為

grid-template-columns: auto auto ;

這是一個鏈接網格布局

和

彈性盒與網格

 #container{ width:200px; height:200px; background-color:blue; display: grid; grid-gap: 2px; grid-template-columns: auto auto auto; grid-template-rows: 60px auto auto; } #item1{ width:50px; height:50px; background-color:red; } #item2{ width:50px; height:50px; background-color:yellow; } #item3{ width:50px; height:50px; background-color:green; }

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

Answer 2

讓我們把日歷牌“來源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。