产品卡片标题每行高度相同答案

【问题标题】：Product cards title same height per row issue产品卡片标题每行高度相同
【发布时间】：2020-02-05 08:24:51
【问题描述】：

谁能建议让卡片标题每行高度相同的最佳方法是什么，以便我的图像在底部的同一行上对齐。我正在寻找响应式解决方案。有任何 CSS 技巧或 jQuery 插件吗？我一直在谷歌搜索，但没有找到任何类似的解决方案。

请注意，标题的绝对高度将不起作用，因为在浏览器调整大小期间，标题会中断为更多行，仍需要再次计算。谢谢

理想的最终结果： https://drive.google.com/file/d/1IeQ6X7R9utZzKTn8UdNFruInezJpX1V_/view?usp=sharing

See in codepen

https://codepen.io/edvardsniedre/pen/ymBdwg

【问题讨论】：

我对描述不是很清楚，所以我更新了我的帖子并添加了图片来展示我在寻找什么。感谢您迄今为止的所有回复。

标签： jquery html css

【解决方案1】：

@user2713970 我认为这段代码会对你有所帮助，请查看。

           <style>
            * { box-sizing: border-box; }

            .card_image { width:100%; height:150px; }
            body { 
              max-width: 960px; margin: 0 auto; padding: 40px 10px;
            }

            .cards 
            {  display: flex; justify-content: space-between; flex-wrap: wrap; }

            .card {
                width: 24%; border: 1px solid black;
                margin-top: 10px; text-align: center;    
            }

            img { width: 100%; }

            .title { padding: 10px 0; }



            @media only screen and (max-width: 700px) {
              .cards {
                .card {
                  width: 49%;
                }
              }
            }



            <body>
                <div class="cards">
                  <div class="card">
                    <img class="card_image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRfwXs8u99aFJFdhPx7oIgK1dLCkqQ14U7Yn4n1nvEwi_rgiWeYfg" alt="">
                    <div class="title">Title Title Title Title Title Title Title Title</div>
                    <div>$20</div>
                  </div>
                  <div class="card">
                    <img class="card_image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQQKa0uIGrJO2QhidOcpE15BSVHK5uK3NNpH0ooXliy89IjeyK-bg" alt="">
                    <div class="title">Title Title Title </div>
                    <div>$20</div>
                  </div>
                  <div class="card">
                    <img class="card_image" src="https://envato-shoebox-0.imgix.net/4646/3935-85f4-41a0-b940-708875ee0a15/tajak+019.jpg?w=500&h=278&fit=crop&crop=edges&auto=compress%2Cformat&s=c45335aca948555287bc4229b1632950" alt="">
                    <div class="title">Title Title Title Title Title Title Title Title</div>
                    <div>$20</div>
                  </div>
                  <div class="card">
                    <img class="card_image" src="http://3v6x691yvn532gp2411ezrib-wpengine.netdna-ssl.com/wp-content/uploads/2019/05/imagetext01.jpg" alt="">
                    <div class="title">Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title</div>
                    <div>$20</div>
                  </div>
                  <div class="card">
                    <img class="card_image" src="https://images.unsplash.com/photo-1535498730771-e735b998cd64?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" alt="">
                    <div class="title">Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title</div>
                    <div>$20</div>
                  </div>
                  <div class="card">
                    <img class="card_image" src="https://i.kinja-img.com/gawker-media/image/upload/s--PnSCSSFQ--/c_scale,f_auto,fl_progressive,pg_1,q_80,w_800/z7jcryloxjedsztssw39.jpg" alt="">
                    <div class="title">Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title</div>
                    <div>$20</div>
                  </div>
                  <div class="card">
                    <img class="card_image" src="https://cdn.pixabay.com/photo/2018/05/28/22/11/message-in-a-bottle-3437294__340.jpg" alt="">
                    <div class="title">Title Title Title Title Title Title Title Title</div>
                    <div>$20</div>
                  </div>
                  <div class="card">
                    <img class="card_image" src="https://www.esa.int/var/esa/storage/images/esa_multimedia/images/2018/03/italy_and_mediterranean/17402074-1-eng-GB/Italy_and_Mediterranean_node_full_image_2.jpg" alt="">
                    <div class="title">Title</div>
                    <div>$20</div>
                  </div>
                </div>
            </body>

【讨论】：

【解决方案2】：

您可以在.title 类上设置height，但是，它不会自动调整为不同大小的标题。以下设置仅适用于您当前的内容。

  .title {
    padding: 10px 0;
    height: 120px;
  }

【讨论】：

【解决方案3】：

@user2713970 根据您的 css 现在您只需为标题设置填充，因此您的标题包含文本，这就是您的高度不均匀的原因。

当前 CSS：

.title {
    padding: 10px 0;
}

如果您将标题设置为固定高度，则所有行的标题将具有相同的高度，并且您的图像将自动与标题顶部对齐。（不需要使用jquery）

更改为

.title {
     padding: 10px 0;
     height: 150px
 }

这里是Codepen 以便更好地理解。
[在codepen demo的第二行卡片中还有一个vertical-align标题，方便理解对齐方式。]

【讨论】：

这不是一个好的解决方案，因为您正在硬编码标题的高度。当文本不超过高度时它可能会起作用，但否则会中断。

【解决方案4】：

由于您的标题内容是可变长度的，因此没有很多方法可以让所有图像在底部的同一行上对齐。也就是说，有一些。其中之一是在标题上设置min-height 和max-height 并使用Webkit 专有的-webkit-line-clamp 属性（以及一些随之而来的必需样式）来截断所有不适合夹线的溢出文本。浏览器对此的支持是不错的，但你会想念 IE 和 Android FF。 line-clamp 属性当前处于编辑草稿状态。实现可能会随着规范中的最终状态而改变。所以，这不是一个很好的跨浏览器解决方案。

但我不明白如何在不截断标题上不适合指定高度的文本的情况下完成您所追求的目标。也许其他人知道方法。

查看下面的解决方案，但也知道还有其他选择可以实现相同的目标但得到更广泛的支持：Clamp.js 就是其中之一。

有关截断溢出文本的其他策略的概述，请参阅关于 CSS 技巧的 this 文章。

顺便说一句，您可能已经在使用它，我会考虑在您的图像上设置一个高度并使用object-fit:cover 来保持它们对齐，同时让它们很好地填满可用空间。我冒昧地在下面的代码中实现了这一点，但我已经评论了我在哪里进行了这些可选更改。

<html>

<head>
  <style>
    * {
      box-sizing: border-box;
    }

    body {
      max-width: 960px;
      margin: 0 auto;
      padding: 40px 10px;
    }

    .cards {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
    }

    .card {
      width: 24%;
      border: 1px solid black;
      margin-top: 10px;
      text-align: center;
      display: flex;
      flex-direction: column;
      /* CHANGED FROM FLEX-END TO SPACE-BETWEEN */
      justify-content: space-between;
    }

    img {
      width: 100%;
      /* OPTIONAL OBJECT-FIT STYLES */
      height: 65%;
      object-fit: cover;
    }

    .title {
      padding: 10px 0;
      min-height: 75px;
      max-height: 75px;
      overflow: hidden;
      visibility: visible;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      line-height: 1.5;
    }

    @media only screen and (max-width: 700px) {
      .cards .card {
        width: 49%;

      }
    }
  </style>
</head>

<body>
  <div class="cards">
    <div class="card">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRfwXs8u99aFJFdhPx7oIgK1dLCkqQ14U7Yn4n1nvEwi_rgiWeYfg" alt="">
      <div class="title">Title Title Title Title Title Title Title Title</div>
      <div class="price">$20</div>
    </div>
    <div class="card">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQQKa0uIGrJO2QhidOcpE15BSVHK5uK3NNpH0ooXliy89IjeyK-bg" alt="">
      <div class="title">Title Title Title </div>
      <div class="price">$20</div>
    </div>
    <div class="card">
      <img src="https://envato-shoebox-0.imgix.net/4646/3935-85f4-41a0-b940-708875ee0a15/tajak+019.jpg?w=500&h=278&fit=crop&crop=edges&auto=compress%2Cformat&s=c45335aca948555287bc4229b1632950" alt="">
      <div class="title">Title Title Title Title Title Title Title Title</div>
      <div class="price">$20</div>
    </div>
    <div class="card">
      <img src="http://3v6x691yvn532gp2411ezrib-wpengine.netdna-ssl.com/wp-content/uploads/2019/05/imagetext01.jpg" alt="">
      <div class="title">Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title</div>
      <div class="price">$20</div>
    </div>
    <div class="card">
      <img src="https://images.unsplash.com/photo-1535498730771-e735b998cd64?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" alt="">
      <div class="title">Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title</div>
      <div class="price">$20</div>
    </div>
    <div class="card">
      <img src="https://i.kinja-img.com/gawker-media/image/upload/s--PnSCSSFQ--/c_scale,f_auto,fl_progressive,pg_1,q_80,w_800/z7jcryloxjedsztssw39.jpg" alt="">
      <div class="title">Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title</div>
      <div class="price">$20</div>
    </div>
    <div class="card">
      <img src="https://cdn.pixabay.com/photo/2018/05/28/22/11/message-in-a-bottle-3437294__340.jpg" alt="">
      <div class="title">Title Title Title Title Title Title Title Title</div>
      <div class="price">$20</div>
    </div>
    <div class="card">
      <img src="https://www.esa.int/var/esa/storage/images/esa_multimedia/images/2018/03/italy_and_mediterranean/17402074-1-eng-GB/Italy_and_Mediterranean_node_full_image_2.jpg" alt="">
      <div class="title">Title</div>
      <div class="price">$20</div>
    </div>
  </div>
</body>

</html>

【讨论】：

我对描述不是很清楚，所以我更新了我的帖子并添加了图片来展示我在寻找什么。感谢到目前为止的所有回复。这是一个很好的解决方案，但我的设计师希望卡片中的所有项目都与底部对齐。请参阅附图。
我看到您更新后的带有图片的帖子。有趣的挑战。除非其他人发布了一个好的解决方案，否则我会尽快研究它。

【解决方案5】：

如果不使用 JavaScript（我确信可以对其进行优化和清理），我无法找到一种方法来做到这一点。

¯_(ツ)_/¯

祝你好运。

<html>

<head>
  <style>
    body {
      max-width: 960px;
      margin: 0 auto;
      padding: 40px 10px;
      background-color: #f1f1f1;
    }

    * {
      box-sizing: border-box;
    }

    .cards {
      display: flex;
      flex-wrap: wrap;
    }

    .card {
      flex: 0 0 100%;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding-left: 10px;
      padding-right: 10px;
      margin-bottom: 20px;
    }

    .img-wrapper {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
    }

    .details {
      background-color: white;
      padding: 20px;
    }

    img {
      position: relative;
      display: block;
      width: 100%;
      height: auto;
      margin-top: auto;
    }

    .price {
      margin-top: 10px;
    }

    @media screen and (min-width: 560px) {
      .card {
        flex: 0 0 50%;
      }
    }

    @media screen and (min-width: 960px) {
      .card {
        flex: 0 0 25%;
      }
    }
  </style>
</head>

<body>
  <div class="cards">
    <div class="card">
      <div class="img-wrapper">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRfwXs8u99aFJFdhPx7oIgK1dLCkqQ14U7Yn4n1nvEwi_rgiWeYfg" alt="">
      </div>
      <div class="details">
        <div class="title">Title Title Title Title Title Title Title Title</div>
        <div class="price">$20</div>
      </div>
    </div>
    <div class="card">
      <div class="img-wrapper">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQQKa0uIGrJO2QhidOcpE15BSVHK5uK3NNpH0ooXliy89IjeyK-bg" alt="">
      </div>
      <div class="details">
        <div class="title">Title Title Title </div>
        <div class="price">$20</div>
      </div>
    </div>
    <div class="card">
      <div class="img-wrapper">
        <img src="https://envato-shoebox-0.imgix.net/4646/3935-85f4-41a0-b940-708875ee0a15/tajak+019.jpg?w=500&h=278&fit=crop&crop=edges&auto=compress%2Cformat&s=c45335aca948555287bc4229b1632950" alt="">
      </div>
      <div class="details">
        <div class="title">Title Title Title Title Title Title Title Title</div>
        <div class="price">$20</div>
      </div>
    </div>
    <div class="card">
      <div class="img-wrapper">
        <img src="http://3v6x691yvn532gp2411ezrib-wpengine.netdna-ssl.com/wp-content/uploads/2019/05/imagetext01.jpg" alt="">
      </div>
      <div class="details">
        <div class="title">Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title</div>
        <div class="price">$20</div>
      </div>
    </div>
    <div class="card">
      <div class="img-wrapper">
        <img src="https://images.unsplash.com/photo-1535498730771-e735b998cd64?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" alt="">
      </div>
      <div class="details">
        <div class="title">Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title</div>
        <div class="price">$20</div>
      </div>
    </div>
    <div class="card">
      <div class="img-wrapper">
        <img src="https://i.kinja-img.com/gawker-media/image/upload/s--PnSCSSFQ--/c_scale,f_auto,fl_progressive,pg_1,q_80,w_800/z7jcryloxjedsztssw39.jpg" alt="">
      </div>
      <div class="details">
        <div class="title">Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title</div>
        <div class="price">$20</div>
      </div>
    </div>
    <div class="card">
      <div class="img-wrapper">
        <img src="https://cdn.pixabay.com/photo/2018/05/28/22/11/message-in-a-bottle-3437294__340.jpg" alt="">
      </div>
      <div class="details">
        <div class="title">Title Title Title Title Title Title Title Title</div>
        <div class="price">$20</div>
      </div>
    </div>
    <div class="card">
      <div class="img-wrapper">
        <img src="https://www.esa.int/var/esa/storage/images/esa_multimedia/images/2018/03/italy_and_mediterranean/17402074-1-eng-GB/Italy_and_Mediterranean_node_full_image_2.jpg" alt="">
      </div>
      <div class="details">
        <div class="title">Title</div>
        <div class="price">$20</div>
      </div>
    </div>
  </div>
  <script>
    document.addEventListener('DOMContentLoaded', function () {


      function setImageHeight() {
        var imageWrapper = document.querySelectorAll('.img-wrapper');
        var elems = [].slice.call(imageWrapper);
        var tallest = Math.max.apply(Math, elems.map(function (elem, index) {
          elem.style.minHeight = '';
          return elem.offsetHeight;
        }));

        elems.forEach(function (elem, index, arr) {
          elem.style.minHeight = tallest + 'px';
        });
      }

      function setTitleHeight() {
        var title = document.querySelectorAll('.title');
        var elems = [].slice.call(title);
        var tallest = Math.max.apply(Math, elems.map(function (elem, index) {
          elem.style.minHeight = '';
          return elem.offsetHeight;
        }));

        elems.forEach(function (elem, index, arr) {
          elem.style.minHeight = tallest + 'px';
        });
      }
      setTimeout(function () {
        setImageHeight();
        setTitleHeight();
      }, 250);
      var resized = true;
      var timeout = null;
      var refresh = function () {
        if (resized) {
          requestAnimationFrame(setImageHeight);
          requestAnimationFrame(setTitleHeight);
        }
        clearTimeout(timeout);
        timeout = setTimeout(refresh, 100);
        resized = false;
      };
      window.addEventListener('resize', function () {
        resized = true;
      });
      refresh();
    });

  </script>
</body>

</html>

【讨论】：

感谢您的回答。是的，JS 看起来是解决它的唯一方法。这对我来说几乎是一个解决方案。我唯一需要计算每行标题相同的高度。如果我将所有行标题设置为相同的高度，那么如果该行只有一行标题，标题和价格之间的空间将不需要很大，如图所示。我只需要弄清楚如何每行做同样的事情，考虑到每个断点的行列数将从 4 变为 2。drive.google.com/file/d/1Hr22U3-_iQeJAL3Y14WDDAiSsajevgPn/…
在修改了你的想法之后，我发现了这个插件，它在代码行中为我做了所有的魔法。耶！插件：github.com/liabru/jquery-match-height 工作演示：codepen.io/edvardsniedre/pen/ymBdwg

【解决方案6】：

最后我找到了这个插件为我解决了这个问题。 https://github.com/liabru/jquery-match-height 工作演示：https://codepen.io/edvardsniedre/pen/ymBdwg

【讨论】：