对齐使用 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>