固定布局和遍历 div 如何实现？

积累知识，胜过积蓄金银！毕竟在文章开发的过程中，会遇到各种各样的问题，往往都是一些细节知识点还没有掌握好而导致的，因此基础知识点的积累是很重要的。下面本文《固定布局和遍历 div 如何实现？》，就带大家讲解一下知识点，若是你对本文感兴趣，或者是想搞懂其中某个知识点，就请你继续往下看吧~

如何实现固定布局和遍历 div

如图所示，有一个大的 div 固定在最上方，其中有四个 div 1234 是通过循环生成的。如何实现这样的布局，或者有更好的解决方案？

答案：

grid 布局完美解决！！！

布局如下：第一个 div 固定，其他 div 动态渲染。

html 代码：

<div class="box">
  <div class="box-item">固定不动</div>
  <div class="box-item">其他1</div>
  <div class="box-item">其他2</div>
  <div class="box-item">其他3</div>
  <div class="box-item">其他4</div>
  <div class="box-item">其他5</div>
  <div class="box-item">其他6</div>
  <div class="box-item">其他7</div>
</div>

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;
}

效果图：

[图片]

优点：

• 布局灵活，可以轻松调整 div 的大小和位置
• 代码简洁，易于理解和维护
• 跨浏览器兼容性好

终于介绍完啦！小伙伴们，这篇关于《固定布局和遍历 div 如何实现？》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~米云公众号也会发布文章相关知识，快来关注吧！

工信部等四部门印发国家锂电池产业标准体系建设指南