Question

我正在尝试编写一些代码，将每个字母的字符串转换为div框，但是如果我使它们越过容器宽度，则div会推到一起，如果它们放到底部并开始另一行此处的代码

function display(string) {
    var x = []
    for(var m = 0; m < string.length;m++) {
        x.push(string[m])
    }
    x.forEach(function(e) {
        document.querySelector(".scene").innerHTML += 
            "<div class=" + e +"></div>"
	});
}
display("abab")

.scene {
    display: flex;
    width: 150px;
}
.a {
    width: 50px;
    height: 50px;
    background: black;
}
.b {
    width: 50px;
    height: 50px;
    background: red;
}
div {
    display: inline-block;
}

<div class='scene'></div>

Answer 1

function display(string) {
    var x = []
    for(var m = 0; m < string.length;m++) {
        x.push(string[m])
    }
    x.forEach(function(e) {
        document.querySelector(".scene").innerHTML += 
            "<div class=" + e +"></div>"
	});
}
display("abab")

.scene {
    display: flex;
    flex-wrap: wrap;
    width: 150px;
}
.a {
    width: 50px;
    height: 50px;
    background: black;
}
.b {
    width: 50px;
    height: 50px;
    background: red;
}
div {
    display: inline-block;
}

<div class='scene'></div>

Answer 2

我不确定我是否正确理解了您的观点，但是尝试在您的.scene类中添加此CSS：“ flex-direction：column”

Answer 3

您可以将外部div设置为display的{{1}}，将内部grid设置为div的{{1}} ：

display

https://jsfiddle.net/chsL784p/

您如何做到这一点，以便将div推入容器之外就可以开始？

3 个答案: