對齊使用 javascript 創建的多個 div

Question

我有一個腳本，它為文本文件中的每一行創建一個帶有名稱和 a.innerHTML 的按鈕。 我試圖將它們對齊在一個大文本區域旁邊的網格中（2 個按鈕寬 x x 按鈕高），但是無法弄清楚如何去做。 有人可以幫助我嗎？

CSS

.textArea{
    width: 700px;
    height: 520px;
    color: white;
    border: none;
    background-color: black;
    resize: none;
    outline: none;
}
.buttons {
    width: 200px;
    height: 100px;
}

HTML

<textarea class ="textArea"id="output" name="consl" cols="100" readonly="true"></textarea>

JS

let btn = document.createElement('button')
btn.innerHTML = title
btn.name = ">>>" + customs[1]
btn.className = "customButtons"
document.body.appendChild(btn)

我的目標圖像（不按比例）：

Answer 1

這是一個 codepen 示例，您可以在其中找到類似於您嘗試實現的內容： https://codepen.io/aSH-uncover/pen/XWqWomj

如果您在文本區域鍵入文本，按鈕將出現在右側，每次您通過按“輸入”在文本區域中添加新行時都會出現 2 個新按鈕（我不確定您是否希望按鈕計數與您的文本匹配或不是，無論如何，此響應中詳細介紹了有關行數的更好方法： 如何使用 JavaScript 獲取 <textarea > 中的行數？ ）

關於您的主要問題要記住的是彈性框的使用，有關更多信息，請查看此頁面： https://css-tricks.com/snippets/css/a-guide-to-flexbox/

在您的情況下，我們為按鈕容器提供 flex 顯示，並要求它將元素包裝在幾行上。

.buttons {
  display: flex;
  flex-wrap: wrap;
}

然后我們給每個按鈕一個 50% 的寬度，這樣兩個按鈕將完全填滿一行並強制進行換行。

button {
  width: 50%;
}

請注意，此問題還有其他解決方案；）

Answer 2

您可以通過不同的方式實現它：例如，一種可能的解決方案是使用float來設置元素的樣式。 在下面的解決方案中，它沒有使用 div 作為容器，但布局是在沒有這樣的元素的情況下構建的。

還要仔細查看按鈕和海關數組，並比較它們的內容和順序：如果您需要將按鈕顯示為不同的順序，您只需調整此類數組元素的順序即可。

以下代碼片段是一個工作示例，如果您希望看到它的實際效果，只需單擊代碼片段末尾的按鈕運行代碼片段：

 let title = "This is the button " let customs = ["Alfa","Bravo","Charlie","Delta",] customs.forEach(function(c) { let btn = document.createElement('button'); btn.innerHTML = title + c; btn.name = ">>>" + c; btn.className = "customButtons"; document.body.appendChild(btn); } );

 textArea { background-color: black; border: none; color: white; outline: none; height: 260px; width: 50%; } button { height: 100px; width: 20%; } button, textArea { text-align: center; float: left; }

 <textarea class ="textArea" id="output" name="consl" readonly="true">Text content into text area</textarea>