Question

嗨，伙计们！我有个问题。我想做与the picture上相同的标记（单击并单击！！！）问题是：同一级别的卡的顶部和底部之间的灰线应对齐。正如您在第一张卡片的轨迹图中看到的那样，由于第二张图片上的较大文本，灰线较低。在第二张卡的轨迹上，灰线较高，因为没有溢出文本。我们可以使用flex和grid。

<div class="cat-cards">
        <div class="cat-card">
            <img src="">
            <div class="short-description">
                short
            </div>
            <div class="long-description">
                long
            </div>
        </div>
        <div class="cat-card"></div>
        <div class="cat-card"></div>
    </div>

我认为基础应该是这样，但是您可以编写任何使用grid和flex的建议

.cat-cards
{
    display: flex;
}

.cat-card
{
    display: grid;
    grid-template-areas: 'image' 'short'
                     'long' 'long';
   }

.cat-card img
{
    grid-area: image;
}

.cat-card .short-description
{
    grid-area: short;
}

.cat-card .long-description
{
    grid-area: long;
}

Answer 1

如果我正确地解释了您的请求，我相信如果一行的内容高度增加，则希望所有行均等扩展。

示例

.Grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr
}

.cat-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
  grid-gap: 10px;
  border: 1px solid #ddd;
  padding: 10px;
}

.cat-card img {  
  max-width: 200px;
}

.long-description{
  grid-column: 1 / 3;
  border-top:1px solid #ddd;
}

<div class="Grid">

  <div class="cat-card">
    <img src="https://images.pexels.com/photos/617278/pexels-photo-617278.jpeg?auto=compress&cs=tinysrgb&h=350">
    <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. Donec et lorem ac nulla scelerisque egestas. 
    </div>
  </div>

  <div class="cat-card">
    <img src="https://images.pexels.com/photos/617278/pexels-photo-617278.jpeg?auto=compress&cs=tinysrgb&h=350">
    <div class="short-description">
      Title:1
      <br/>Title:2
      <br/>Title:3
      <br/>Title:4
      <br/>Title:5
      <br/>Title:6
      <br/>Title:7
      <br/>Title:8
      <br/>Title:9
      <br/>Title:10
    </div>
    <div class="long-description">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas. 
    </div>
  </div>

  <div class="cat-card">
    <img src="https://images.pexels.com/photos/617278/pexels-photo-617278.jpeg?auto=compress&cs=tinysrgb&h=350">
    <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. Donec et lorem ac nulla scelerisque egestas. 
    </div>
  </div>

  <div class="cat-card">
    <img src="https://images.pexels.com/photos/617278/pexels-photo-617278.jpeg?auto=compress&cs=tinysrgb&h=350">
    <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. Donec et lorem ac nulla scelerisque egestas. 
    </div>
  </div>

</div>

Answer 2

您的父容器应始终包含display:flex;语句。这将确保任何孩子也能应用它。可以在包装器内的孩子上使用inline flex参数，并在两者上都应用flex:50%的含义。

您可以在下面找到更多资源，为您完成工作后，我还将编辑代码。

http://flexboxgrid.com/

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

对齐不同块CSS（柔性/网格）的子块的高度

2 个答案: