如何在支持IE11和所有主要浏览器的情况下对该图表进行css处理？
Flexbox似乎不支持动态高度。
lg viewport必须有左/右列，xs viewport不能有列吗？
Codepen
<div class="container">
<div id="box1" class="box">box1</div>`
<div id="box2" class="box">box2</div>`
<div id="box3" class="box">box3</div>`
<div id="box4" class="box">box4</div>`
<div id="box5" class="box">box5</div>`
</div>
最佳答案
正如我在评论中提到的，您可以使用媒体查询根据当前屏幕大小呈现两个布局并仅显示一个布局。
黑客实现示例：
<html>
<head>
<style>
.container {
width: 100%;
}
.row {
display: flex;
flex-direction: row;
justify-content: flex-start;
width: 100%;
}
.column {
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.item {
width: 100%;
border: solid 1px #dadada;
border-radius: 16px;
display: flex;
justify-content: center;
align-items: center;
}
@media screen and (max-width: 600px) {
.desktop-only{
display: none;
}
.column{
width: 100%;
}
}
@media screen and (min-width: 601px) {
.mobile-only{
display: none;
}
.column{
width: 50%;
}
}
.item-1 {
height: 200px;
}
.item-2 {
height: 400px;
}
.item-3 {
height: 250px;
}
.item-4 {
height: 300px;
}
.item-5 {
height: 350px;
}
</style>
</head>
<body>
<div class="desktop-only">
<div class="container">
<div class="row">
<div class="item item-1">1</div>
</div>
<div class="row">
<div class="column">
<div class="item item-3">3</div>
<div class="item item-5">5</div>
</div>
<div class="column">
<div class="item item-2">2</div>
<div class="item item-4">4</div>
</div>
</div>
</div>
</div>
<div class="mobile-only">
<div class="container">
<div class="column">
<div class="item item-1">1</div>
<div class="item item-2">2</div>
<div class="item item-3">3</div>
<div class="item item-4">4</div>
<div class="item item-5">5</div>
</div>
</div>
</div>
</body>
</html>断点设置为600px。更改600像素上下的窗口宽度以查看布局“更改”
关于javascript - 2柱腹板到1柱移动架，带动态高度盒，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46743322/