使用此代码:
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
background-color: #2196F3;
padding: 10px;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
}
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>
可以在这里看到和运行:https://www.w3schools.com/css/tryit.asp?filename=trycss_grid
有没有可能在div元素中添加一个css样式(或者通过其他方式),使其中一个数字垂直偏移15个像素。
具体地说,将中心单元格中的5垂直偏移15个像素?
(If所附的图像工程,然后我已经模仿了我的意思)。
谢谢
2条答案
按热度按时间8ehkhllq1#
只需使用
nth-child
pseudo class选择第5个元素并调整该元素的填充。请参见下面的标记代码。qyyhg6bp2#
当然,您可以自由地将大多数CSS规则应用于网格子元素。
您可以为想要偏移的特定元素添加单独的类,即
grid-item__offset
,以及底部填充为15px的规则: