Jquery 每行发行的产品卡片标题高度相同_Jquery_Html_Css

Jquery 每行发行的产品卡片标题高度相同

jquery html css

Jquery 每行发行的产品卡片标题高度相同,jquery,html,css,Jquery,Html,Css,有人能建议什么是最好的方法，使卡片标题每行相同的高度，使我的图像在底部的同一行对齐。我正在寻找一个响应迅速的解决方案。有CSS技巧或jQuery插件吗？我一直在谷歌搜索，但没有找到任何类似的解决方案请注意，请记住，标题的绝对高度将不起作用，因为在浏览器调整大小期间，标题将断开为更多行，仍需要再次计算。谢谢理想的最终结果：您可以在.title类上设置高度，但不会自动调整为不同大小的标题。以下设置仅适用于您当前的内容 .title { padding: 10px 0; h

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

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

理想的最终结果：

您可以在

.title

类上设置

高度

，但不会自动调整为不同大小的标题。以下设置仅适用于您当前的内容

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

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


*{框大小：边框框；}
.card_图像{宽度：100%；高度：150px；}
正文{
最大宽度：960px；边距：0自动；填充：40px 10px；
}
.卡片
{display:flex；justify content:space-between；flex-wrap:wrap；}
.卡片{
宽度：24%；边框：1倍纯黑；
页边距顶部：10px；文本对齐：居中；
}
img{宽度：100%；}
.title{padding:10px 0；}
@仅介质屏幕和（最大宽度：700px）{
.卡片{
.卡片{
宽度：49%；
}
}
}
标题标题标题标题
$20
头衔
$20
标题标题标题标题
$20
标题标题标题标题标题标题
$20
标题标题标题标题标题标题
$20
标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题
$20
标题标题标题标题
$20
标题
$20

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

当前CSS:

.title {
    padding: 10px 0;
}

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

更改为

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

这是为了更好地理解。

[在codepen演示的第二行卡片中，还有一个垂直对齐标题，用于理解对齐方式。]

由于标题内容长度可变，因此没有很多方法可以将所有图像对齐在底部的同一行上。也就是说，有一些。其中一种方法是在标题上设置

最小高度

和

最大高度

，并使用Webkit专有的

-Webkit line clamp

属性（以及一些附带的、必需的样式）截断所有不适合固定行的溢出文本。浏览器对此的支持相当不错，但你会错过IE和Android FF。

线夹

属性当前处于编辑器的草稿状态。实现可能会随着规范中的最终状态而改变。因此，这不是一个很好的跨浏览器解决方案

但是我不知道你如何在不截断标题上不符合指定高度的文本的情况下完成你想要的。也许其他人知道一条路

查看下面的解决方案，但也要知道还有其他选项可以实现相同的目标，但需要更广泛的支持：是其中之一

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

作为一个旁白，你可能已经有了这方面的工作，我会考虑在你的图像上设置一个高度，并使用对象拟合：封面使它们保持对齐，同时让它们很好地填充可用空间。我已经在下面的代码中自由地实现了这一点，但是我已经评论了我在哪里做了这些可选的更改


* {
框大小：边框框；
}
身体{
最大宽度：960像素；
保证金：0自动；
填充：40px 10px；
}
.卡片{
显示器：flex；
证明内容：之间的空间；
柔性包装：包装；
}
.卡片{
宽度：24%；
边框：1px纯黑；
边缘顶部：10px；
文本对齐：居中；
显示器：flex；
弯曲方向：立柱；
/*从柔性端更改为间隔*/
证明内容：之间的空间；
}
img{
宽度：100%；
/*可选的对象匹配样式*/
身高：65%；
对象匹配：覆盖；
}
.头衔{
填充：10px0；
最小高度：75px；
最大高度：75px；
溢出：隐藏；
能见度：可见；
显示：-网络工具包盒；
-webkit线夹：3个；
-网络工具包盒方向：垂直；
线高：1.5；
}
@仅介质屏幕和（最大宽度：700px）{
.卡片.卡片{
.title {
     padding: 10px 0;
     height: 150px
 }