可以在css网格中“偏移”一个div,如图?所示
2mbi3lxu1#
考虑负利润:
.container { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); width: 500px; height: 200px; border: 1px solid; } .box { grid-column: 2/3; margin-left: -20px; margin-right: -80px; background: red; } .box-alt { grid-column: 2/3; grid-row:2; background: blue; }
个字符
vfwfrxfs2#
<div class="container"> <div class="area1"></div> <div class="area2"></div> </div>
.container{ display: grid; grid-template: 1fr / repeat(3, 1fr); grid-template-areas: "area1 offset area2"; } .area{ width: 100%; height: 40px; } .area1{ background-color: red; } .area2{ background-color: yellow; }
mwg9r5ms3#
如果您在this link中使用Mozilla的指南,您可以使用如下所示的空div作为offset div:
<div class="container"> <div class="row"> <!-- Empty/Offset Div Here --> <div class="col-xl-2"> </div> <div class="col-xl-8"> <!-- Content Here --> </div> </div> </div>
3条答案
按热度按时间2mbi3lxu1#
考虑负利润:
个字符
vfwfrxfs2#
mwg9r5ms3#
如果您在this link中使用Mozilla的指南,您可以使用如下所示的空div作为offset div: