搜索

首页  >  问答  >  正文

实现一个网格布局,包含3列,其中一个项目跨越整个第一列的高度

我想在 CSS 中偏移 1 列内容。我认为就像执行以下操作一样简单。现在,这确实偏移了顶部,但它使第二列与第一列的高度(包括边距)匹配。我还能如何偏移第一列?

https://jsbin.com/delobaluga/edit?html,css,输出

.grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   grid-gap: 20px;
}

.grid .item:first-child {
   margin-top: 105px;
}

<div class='grid'>
    <div class='item'></div>
    <div class='item'></div>
</div>

P粉659516906P粉659516906229 天前516

全部回复(1)我来回复

  • P粉790819727

    P粉7908197272024-04-03 00:22:48

    如果要偏移第一列,同时保持第二列的高度不受影响,可以在第一列上使用内边距而不是边距。 padding影响元素的内容区域,而margin影响周围区域,所以如果你给第一列添加padding,它会增加它的大小并偏移其中的内容,但不会影响第二列的高度。

    这是经过此改进的代码:

    .grid {
       display: grid;
       grid-template-columns: repeat(2, 1fr);
       grid-gap: 20px;
    }
    
    .grid .item:first-child {
       padding-top: 105px;
    }
    
    

    回复
    0
  • 取消回复