代码之家 › 专栏 › 技术社区 › David Anderson

使用CSS网格将内容对齐到行的顶部

css-grid css html

David Anderson · 技术社区 · 1 年前

我正在布局一个3x2的网格,每个单元格中都有图像、标题和文本。如果文本比同一行中的其他文本短,它会在顶部创建一个空白,内容会向下移动。

我想保持图像缩略图的顶部对齐,让较长的文本向下推,但调整边距和填充似乎不起作用。是什么导致了这种情况的发生?

        .kb-feature-table-grid {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 20px;
            align-items: center;
            max-width: 1000px;
            margin: 0 auto;
            padding: 20px;
        }
        
        .kb-feature-table-grid img {
            width: 100%;
            height: auto;
            border-radius: 10px;
        }

        @media (max-width: 600px) {
            .kb-feature-table-grid {
                grid-template-columns: 1fr;
                text-align: center;
            }
        }

    <div class="kb-feature-table-grid">

        <div>
            <div><img src="https://www.sovol3d.com/cdn/shop/files/Sovol_SV06_0ed3761d-395b-4beb-9c23-ffc42107bde8_407x_crop_center.jpg?v=1702378595" alt="Sample Image"></div>
            <div>
                <h2>220*220*250mm</h2>
                <p>220*220*250mm print size, enough for daily use and household use.</p>
            </div>
        </div>
    
        <div>
            <div><img src="https://www.sovol3d.com/cdn/shop/files/Sovol_SV06_Best_Budget_3D_Printer_Sovol_3D_Printer_9_407x_crop_center.jpg?v=1697454898" alt="Sample Image"></div>
            <div>
                <h2>Resume Printing</h2>
                <p>The resume printing function can make the printer continue printing perfectly after a power outage.</p>
            </div>
        </div>
        
        <div>
            <div><img src="https://www.sovol3d.com/cdn/shop/files/SV06-08_8224235d-1ef5-43e4-a415-acf133eaaa09_407x_crop_center.jpg?v=1715857902" alt="Sample Image"></div>
            <div>
                <h2>Dual Z axis</h2>
                <p>Dual Z-axis screws and stepper motors improve the accuracy and precision of the nozzleâs vertical movement with a specified Z-axis accuracy of 0.001mm.</p>
            </div>
        </div>
        
    </div>

2 回复 | 直到 1 年前

Paulie_D 1 年前

删除 align-items:center .

.kb-feature-table-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
  /*  align-items: center; */
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
}

.kb-feature-table-grid img {
  width: 100%;
  height: auto;
  border-radius: 10px;
}

@media (max-width: 600px) {
  .kb-feature-table-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
}

<div class="kb-feature-table-grid">

  <div>
    <div><img src="https://www.sovol3d.com/cdn/shop/files/Sovol_SV06_0ed3761d-395b-4beb-9c23-ffc42107bde8_407x_crop_center.jpg?v=1702378595" alt="Sample Image"></div>
    <div>
      <h2>220*220*250mm</h2>
      <p>220*220*250mm print size, enough for daily use and household use.</p>
    </div>
  </div>

  <div>
    <div><img src="https://www.sovol3d.com/cdn/shop/files/Sovol_SV06_Best_Budget_3D_Printer_Sovol_3D_Printer_9_407x_crop_center.jpg?v=1697454898" alt="Sample Image"></div>
    <div>
      <h2>Resume Printing</h2>
      <p>The resume printing function can make the printer continue printing perfectly after a power outage.</p>
    </div>
  </div>

  <div>
    <div><img src="https://www.sovol3d.com/cdn/shop/files/SV06-08_8224235d-1ef5-43e4-a415-acf133eaaa09_407x_crop_center.jpg?v=1715857902" alt="Sample Image"></div>
    <div>
      <h2>Dual Z axis</h2>
      <p>Dual Z-axis screws and stepper motors improve the accuracy and precision of the nozzleâs vertical movement with a specified Z-axis accuracy of 0.001mm.</p>
    </div>
  </div>

</div>

Derek Roberts 1 年前

尝试执行以下步骤: 我认为你不需要对齐项目:从.kb特征表网格居中。接下来也这样做

在网格项中添加了显示:flex和flex方向:列 (.kb-feature-table-grid > div) . 已使用 align-items: flex-start to align content at the top within each grid cell.

为h2和p元素添加了margin:0,以确保间距一致。