扫码关注官方订阅号
我在定位 div 时遇到了问题,就像照片中的那样。
我已经尝试过这样的方法,但我在使用 css 对其进行样式设置和定位时遇到了麻烦。
单个 div 被命名为前两张卡/div。 第二个 div 被命名为向下的第二张卡/div。
CSS 网格可以帮助您处理这些类型的布局。研究下面的代码,了解如何根据模型布置盒子。
请务必仔细研究 MDN 上有关网格模板区域的以下部分:将网格单元格留空
网格模板区域
div { border: 1px solid black; } .strategy { grid-area: strategy; } .efficient { grid-area: efficient; } .fast { grid-area: fast; } .reliable { grid-area: reliable; } .wrapper { width: 500px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(100px, auto); grid-template-areas: "fast efficient ." /* 3 cols: fast / efficient / . === empty col */ ". strategy reliable"; }
<section class="wrapper"> <div class="fast">Fast</div> <div class="efficient">Efficient</div> <div class="strategy">Strategy</div> <div class="reliable">Reliable</div> </section>
资源: CSS 网格完整指南
微信扫码关注PHP中文网服务号
QQ扫码加入技术交流群
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
PHP学习
技术支持
返回顶部
CSS 网格可以帮助您处理这些类型的布局。研究下面的代码,了解如何根据模型布置盒子。
请务必仔细研究 MDN 上有关
网格模板区域的以下部分:将网格单元格留空div { border: 1px solid black; } .strategy { grid-area: strategy; } .efficient { grid-area: efficient; } .fast { grid-area: fast; } .reliable { grid-area: reliable; } .wrapper { width: 500px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(100px, auto); grid-template-areas: "fast efficient ." /* 3 cols: fast / efficient / . === empty col */ ". strategy reliable"; }资源: CSS 网格完整指南