小编use*_*998的帖子

对齐不同块的子元素

我有一份商品清单。我需要在二维列表中显示它们。每个商品都有子元素：照片、标题、描述、价格和购买按钮，必须以这种方式调整大小和位置：商品行中的所有标题、描述、价格和照片必须位于相同的 y 坐标位置，并且具有height 是一行中对应高度元素的最大值。

我试过这个：“网格模板行：1fr 1fr 1fr 1fr 30px;” 使一行中的所有子元素都位于相同的 y 位置，但我需要它们的高度以适应内容并且不高于一行中的最大元素。PS 您可以使用 flex 或任何您想要的方式提供代码。

代码

.Grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat( auto-fill, 280px);
}

.loon-card {
  grid-template-rows: 1fr 1fr 1fr 1fr 30px;
  display: grid;
  grid-gap: 10px;
  border: 1px solid #ddd;
  padding: 10px;
}

.long-description {
  border-top: 1px solid #ddd;
}

Run Code Online (Sandbox Code Playgroud)

<div class="Grid">

  <div class="loon-card">
    <img src="">
    <div class="short-description">
      Title:1
      <br/>Title:2
      <br/>Title:3
      <br/>Title:4
    </div>
    <div class="long-description">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. …

Run Code Online (Sandbox Code Playgroud)

css css-grid

use*_*998

2019 11-25

10
推荐指数

2
解决办法

3636
查看次数