Question

我有一个包含“卡片”的容器：上面的图像，下面是相关的文本。这种事情：

<div class = "cards">

  <div class = "card">
    <div class = "image-wrap">
      <img src= "image1.jpg" />
    </div>
    <div class = "text">
      Lorem ipsum
    </div>
  </div>

  <div class = "card">
    <div class = "image-wrap">
      <img src= "image2.jpg" />
    </div>
    <div class = "text">
      Lorem ipsum dolor sit
    </div>
  </div>

  <!-- snip -->

</div>

现在，这些图像的高度可变，我希望它们在每行的底部边缘对齐。每行中“卡片”的数量将根据响应断点而有所不同，因此表在此处将无法工作。

这个jsfiddle到达了那里：https://jsfiddle.net/uf1d4nx6/4/

..但是我的目标是使每个可变高度图像的底部在每一行中彼此对齐。每张卡的高度应为适应该行中最高卡的高度所必需的最小值，并使该行中每张图像的底部对齐。最终产品应如下所示： ideal layout

我不想将图像放在自己的容器中，而将文本放在单独的容器中，因为它需要与响应一起工作，并且每行中都有不同数量的“卡片”，具体取决于响应断点

理想情况下，正在寻找纯CSS解决方案，以便在js加载后事情不会跳来跳去，但我不确定目前是否可以使用纯CSS来实现。

.cards {
   grid-template-columns: calc(1/3*100% - 1/3*10px) calc(1/3*100% - 1/3*10px) calc(1/3*100% - 1/3*10px);
  grid-gap: 5px;
  margin: 0 auto;
  display: grid;
  width: 100%;
  background-color: #f1f1f1;
}

.card {
  border: 1px solid #ccc;
  padding: 5px;
}

.image-wrap,
.text {
  width: 100%;
}

.image-wrap {
  text-align: center;
}

<div class = "cards">

  <div class = "card">
    <div class = "image-wrap">
      <img src ="https://via.placeholder.com/90x40/fff.jpg"> 
    </div>
     <div class = "text">
      Lorem ipsum dolor sit amet
    </div>    
  </div>
  
  <div class = "card">
    <div class = "image-wrap">
      <img src ="https://via.placeholder.com/90x80/fff.jpg">
     </div>
    <div class = "text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>    
  </div>

  <div class = "card">
    <div class = "image-wrap">
      <img src ="https://via.placeholder.com/90x50/fff.jpg">
    </div>
    <div class = "text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>    
  </div>
  
  <div class = "card">
    <div class = "image-wrap">
      <img src ="https://via.placeholder.com/90x50/fff.jpg">
    </div>
    <div class = "text">
      Lorem ipsum dolor sit amet.
    </div>    
  </div>


</div>

Answer 1

请注意

高度将是具有最大高度的图像的高度。 如果您确实有各种各样的图像），请使用jquery设置此CSS属性。

.image-wrap，.text {height： 80px; }

剩余边距将是每个图像大小的50％（以像素为单位定义）。 如果您确实有宽度各异的图像），请使用jquery内联设置此CSS属性。

.image-wrap img {position：absolute; 左边距：-45像素； bottom：0;}

.cards {
   grid-template-columns: calc(1/3*100% - 1/3*10px) calc(1/3*100% - 1/3*10px) calc(1/3*100% - 1/3*10px);
  grid-gap: 5px;
  margin: 0 auto;
  display: grid;
  width: 100%;
  background-color: #f1f1f1;
}

.card {
  border: 1px solid #ccc;
  padding: 5px;
}

.image-wrap,
.text {
  width: 100%;
  height:80px;
}

.image-wrap {
  position:relative;
  text-align: center;
}

.image-wrap img {
  position:absolute;
  margin-left:-45px;
  bottom:0;
}

<div class = "cards">

  <div class = "card">
    <div class = "image-wrap">
      <img src ="https://via.placeholder.com/90x40/fff.jpg"> 
    </div>
     <div class = "text">
      Lorem ipsum dolor sit amet
    </div>    
  </div>
  
  <div class = "card">
    <div class = "image-wrap">
      <img src ="https://via.placeholder.com/90x80/fff.jpg">
     </div>
    <div class = "text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>    
  </div>

  <div class = "card">
    <div class = "image-wrap">
      <img src ="https://via.placeholder.com/90x50/fff.jpg">
    </div>
    <div class = "text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>    
  </div>
  
  <div class = "card">
    <div class = "image-wrap">
      <img src ="https://via.placeholder.com/90x50/fff.jpg">
    </div>
    <div class = "text">
      Lorem ipsum dolor sit amet.
    </div>    
  </div>


</div>

使用纯CSS在行中底部对齐的可变图像在行中

1 个答案: