css布使用固定布局和遍历div
如图所示，有一个大的div固定在第一个位置，里面有若干个通过for循环生成的div，编号为1、2、3、4。
解决方案
使用css的grid布局可以完美解决这个问题。
立即学习“前端免费学习笔记（深入）”；
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;
}效果
采用grid布局后，固定不动的div将占据两行一列，而其他div会自动排列在下面。
+-------------+-------+
| 固定不动 | 1 |
| +-------+
+-------------+ 2 |
+-------+
3 |
+-------+
4 |
+-------+
5 |
+-------+以上就是如何用CSS Grid布局实现首个div固定位置，其他div自动排列？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
777
收藏
