position 從左上角到右下角動態創建點
[英]position dynamically created dots from left upper corner to right lower corner
問題描述
我想使用 javascript 函數將一些紅dots和綠點添加到點容器中，如下所示：
const dots = document.querySelector('.dots'); function addGreenDot() { dots.innerHTML += `<span class="greenDot">.</span>`; } function addRedDot() { dots.innerHTML += `<span class="redDot">.</span>`; } for(let i = 0; i < 10; i++) { addGreenDot(); } for(let i = 0; i < 10; i++) { addRedDot(); }
html, body { height: 100%; } body { background: #fafafc; margin: 0; }.flex-container { height: 100%; padding: 0; margin: 0; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; }.dots { height: 30%; width: 80%; font-weight: bold; display: flex; position: absolute; font-size: 100px; top: 60%; outline: 0.1vw dashed orange; text-align: center; }.redDot { color: red; }.greenDot { color: green; }
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <div class="flex-container"> <div class="dots"></div> </div> </body> </html>
我想從容器的左上角到右下角的 position 點像這樣：
但是我找不到解決方案..請幫助..
2 個解決方案
解決方案1
1 已采納 2021-02-26 17:49:44
const dots = document.querySelector('.dots'); function addGreenDot() { dots.innerHTML += `<span class="greenDot"></span>`; } function addRedDot() { dots.innerHTML += `<span class="redDot"></span>`; } for(let i = 0; i < 20; i++) { addGreenDot(); } for(let i = 0; i < 10; i++) { addRedDot(); }
* { box-sizing: border-box; } html, body { height: 100%; } body { background: #fafafc; margin: 0; }.flex-container { height: 100%; padding: 0; margin: 0; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; }.dots { width: 80%; padding: 20px; margin-right: -10px; margin-bottom: -10px; font-weight: bold; display: flex; flex-wrap: wrap; text-align: center; outline: 0.1vw dashed orange; }.redDot { width: 10px; height: 10px; background-color: red; border-radius: 50%; margin-right: 10px; margin-bottom: 10px; }.greenDot { width: 10px; height: 10px; background-color: green; border-radius: 50%; margin-right: 10px; margin-bottom: 10px; }
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <div class="flex-container"> <div class="dots"></div> </div> </body> </html>
解決方案2
0 2021-02-26 17:52:07
您可以使用display:inline-block而不是flex來顯示彼此相鄰的點。 一旦一個點不適合，它就會跳到下一行。 您也不需要外部容器。
HTML
<div class="dots"></div>
CSS
.dots {
display:block;
height: 30%;
width: 50vw;
font-weight: bold;
font-size: 100px;
outline: 0.1vw dashed orange;
text-align: left;
}
.redDot {
color: red;
display: inline-block;
}
.greenDot {
color: green;
display: inline-block;
}
如何將共享按鈕放置在游戲的左上角而不是視圖上？
[英]How to position the sharing buttons on upper-left corner of the game and not the view?
我的按鈕沒有通過 javascript DOM 從左側移動到右上角
[英]My button does not move to the upper right corner from the left side via javascript DOM
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.