如何使元素以两行方式溢出答案

【问题标题】：How to make elements overflow on two lines manner如何使元素以两行方式溢出
【发布时间】：2023-04-02 13:21:01
【问题描述】：

我有这些蓝色方块，我想在两行上水平溢出（每次创建一个新方块时，它会在上面一行和下面一行中交替创建，依此类推）你可以使用 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>

【问题讨论】：

标签： javascript jquery html css sass

【解决方案1】：

请检查这是否符合您的要求。

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;
}

【讨论】：

将.horizontal类的高度增加到750px。