我有这些蓝色正方形，我想在两行上水平溢出（每次创建一个新正方形时，它都会在上面的行和下面的行等之间交替出现），可以使用CSS，Sass，JavaScript或jQuery。我想在我的项目中使用它，因为这仅是前端，而后端代码会生成新的平方...非常感谢...
这是我的代码：
<head>
<style>
.test {
background: blue;
width: 372.1478174125px;
height: 230px;
margin: 5px;
display: inline-block;
}
.horizontal {
background: gray;
height: 640px;
margin: 0px;
padding: 0px;
white-space: nowrap;
}
</style>
</head>
<body>
<div class= "horizontal">
<div class = "test"> hello </div><div class = "test"> hello </div>
<div class = "test"> hello </div>
<div class = "test"> hello </div>
<div class = "test"> hello </div>
<div class = "test"> hello </div>
<div class = "test"> hello </div>
<div class = "test"> hello </div>
<div class = "test"> hello </div>
<div class = "test"> hello </div>
</div>
</body>
最佳答案
请检查是否符合您的要求。
https://codepen.io/anon/pen/MrNqwo?editors=1100
这是我改变的风格。
.horizontal {
background: gray;
height: 640px;
margin: 0px;
padding: 0px;
width:100%;
display:flex;
flex-wrap: wrap;
flex-direction: column;
}
关于javascript - 如何使元素以两行方式溢出，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48468430/