
如何实现固定布局和遍历div
如图所示,大的div固定在第一个位置,而标有1234的div则是通过for循环生成的。能否实现这样的布局,或者有更好的解决方案?
解决方案:
要实现这样的布局,推荐使用grid布局,它可以完美地解决这个问题。
立即学习“前端免费学习笔记(深入)”;
布局如下:
- 第一个div固定不动。
- 其余div动态渲染出来。
html 代码:
固定不动其他1其他2其他3其他4其他5其他6其他7
css 代码:
.box {
display: grid;
grid-template-columns: repeat(2, 1fr);
border: 1px solid #eee;
gap: 10px;
padding: 5px;
}
.box .box-item {
border: 1px solid #eee;
}
.box .box-item:first-child {
grid-row-start: 1;
grid-row-end: 3;
}效果:
[图片:grid布局实现效果](https://segmentfault.com/img/bvdaqja)










