可以使用CSS的flex布局来解决这个问题。
代码示例:
HTML代码:
CSS代码:
.container {
display: flex;
flex-wrap: wrap;
}
.item {
flex: 1;
}
.item1 {
height: 100px;
}
.item2 {
height: 200px;
}
.item3 {
height: 150px;
}
.item4 {
height: 300px;
}
.item5 {
height: 250px;
}
在这个示例中,我们使用了flex布局,并将所有的子项的flex值都设置为1,来保证它们的比例是相同的。然后,我们为每个子项设置应有的高度,以保证比例的正确性。flex-wrap属性指定了换行,因此我们可以在一个容器内放置任意数量的子项并使其自动适应。
上一篇:比例值和位置不正确
下一篇:比例轴变换导致拓扑断开