w3-CSS append 当内容宽度大于带有 inline-flex 的 div 中的视口宽度时换行

Question

我将一堆带有 w3-card 的盒子附加到这个 div 中：

<div id="myClasses" class="w3-container" style="display: inline-flex;">

这是我 append 的位置：

myclasses.append([
     $('<div/>', {"class": "w3-card button", "onclick": "enterThisClass(" + e + ")"}).append([
           $('<h3/>').text(snapshot.val().name)
     ])
])

这工作正常，但是当我并排放置太多盒子时，它们只会挤压在一起并将它们隐藏在边缘上。 我将如何做到这一点，这样它就不会压扁 go 边缘，而是换一条线？

Answer 1

尝试向动态 div 添加宽度。 比如 20%。 所以当你 append 5 div 的时候。 第 6 个 div 将在下方自动移动。 尝试