【如何在任务八中实现gird布局 _管理工具 】 | IT修真院·坑乎
如何在任务八中实现gird布局
我也踩过这个坑( 1 )
已统计您的踩坑,无需重复点击
回答(0)
管理工具
详细描述
图片
文本
url
.wrapper1{ display: grid; margin-top: 2rem; grid-template-columns:50% 50%; grid-template-rows: 3rem 3rem; } .item1{ border: 1px solid #edf1f2; color: #b0b0b0; } .item2{ border: 1px solid #edf1f2; color: #b0b0b0; } .item3{ border: 1px solid #edf1f2; color: #b0b0b0; } .item4{ border: 1px solid #edf1f2; color: #b0b0b0; } .mul{ color: #f01400; padding-top: 0.5rem; padding-left: 8rem; position: absolute; } .bop{ padding-left: 1rem; position: absolute; padding-top: 0.5rem; } .bor{ padding-left: 1rem; position: absolute; padding-top: 0.5rem; } .item1 img{ padding-left: 4rem; padding-top: 0.6rem; } .lov{ margin-left: 7rem; margin-top: 0.5rem; } .lvo{ margin-top: 0.5rem; } .wrapper2{ display: grid; grid-template-columns:40% 60%; grid-template-rows: 40px 40px 40px; } .item5{ border: 1px solid #edf1f2; grid-row-start: 1; grid-row-end: 4; } .item5 p{ text-align: center; margin-top: 4rem; color: #b0b0b0; } .item6{ border: 1px solid #edf1f2; } .item7{ border: 1px solid #edf1f2; } .item8{ border: 1px solid #edf1f2; } .year{ margin-left: 1rem; } .month{ float:right; margin-right: 1rem; } .wrapper3{ display: grid; grid-template-columns:100%; grid-template-rows: 40px 40px; } .item9{ border: 1px solid #edf1f2; } .fir{ position: absolute; padding-left: 2rem; padding-top: 0.5rem; } .fiu{ position: absolute; color: #f01400; padding-top: 0.5rem; padding-left: 3.5rem; } .vd{ position: absolute; padding-top: 0.5rem; padding-left: 5.5rem; } .item10{ color: #a9a9a9; font-size:0.5px ; text-indent: 3rem; padding-top: 1rem; } footer { color: #ffffff; background: #29b078; width: 100%; } .trick{ display: block; height: 15rem; } .djc{ margin-top: 3rem; } .dj{ margin-top: 3rem; float: right; }" class="sourceLink">点我跳转源码链接
编辑于2024-04-26