我有这些蓝色方 block ，我想在两行上水平溢出(每次创建一个新方 block 时，它会在上面一行和下面一行之间交替创建，依此类推)你可以使用 CSS 、 Sass 、 JavaScript或 jQuery .. 我想要这个用于我的元素，因为这只是前端，后端代码生成新的方 block ......非常感谢......
这是我的代码:
<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/