Question

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

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

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

See in codepen

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

Answer 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>

Answer 2

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

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

Answer 3

@ user2713970（根据您的CSS），现在您仅将填充设置为标题，因此标题包裹了文字，这就是为什么高度不均匀的原因。

当前CSS：

.title {
    padding: 10px 0;
}

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

更改为

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

这里是Codepen，供您更好地理解。
[在codepen演示卡的第二行中也有一个垂直对齐标题，用于了解对齐方式。]

Answer 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>

Answer 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>

Answer 6

最后，我找到了为我解决了该插件的插件。 https://github.com/liabru/jquery-match-height 工作示例：https://codepen.io/edvardsniedre/pen/ymBdwg

产品卡标题每行高度相同

6 个答案: