。
要实现数据按行显示,可以使用CSS的flexbox布局或者grid布局来实现。以下是两种方法的示例:
.parent-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
在ngFor迭代的子元素上添加以下CSS样式:
.child-element {
flex-basis: 100%;
}
这样,子元素会按照每行一个的方式进行布局,实现按行显示。
.parent-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 10px;
}
在ngFor迭代的子元素上添加以下CSS样式:
.child-element {
grid-column: span 1;
}
这样,子元素会按照每行一个的方式进行布局,实现按行显示。
推荐的腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云