javascript - 如何制作具有相同高度内部元素的相同高度列？提出了错误的解决方案

Question

问题：我想制作一个有 5 列的响应式布局。每列都有一个图像、一个标题和一个文本。我希望图像与所有其他图像异化，标题与标题异化，文本与文本。元素的高度应等于其所在行中较大元素的最大高度。

找到的解决方案：我通过迭代不同的元素获得了结果，我希望它具有相同的高度，检查最大高度并使用 javascript 将所有元素设置为这个高度。然后我添加了另一个脚本，每次调整窗口大小时都会再次执行此过程。这是我所拥有的代码笔演示。

我在寻找什么：我寻找实现这一结果的最佳实践方法。我想这应该是可能的纯CSS。

谢谢你们！

$(document).ready(function() {
    //Same height text
    var max = 0;
    $(".same-height").each(function(i) {
        if ($(this).height() > max) {
            max = $(this).height()
        }
    });
    $(".same-height").height(max);

    //same heigh image
    var max2 = 0;
    $(".same-height-img").each(function(i) {
        if ($(this).height() > max2) {
            max2 = $(this).height()
        }
    });
    $(".same-height-img").height(max2);

    //Execute the operation every time that the window resizes. 

    //Same height text
    $( window ).resize(function() {
        var max1 = 0; 
        //We need to set the height to auto first to get the initial value. 
        $(".same-height").css("height", "auto");
        $(".same-height").each(function (i){
            if($(this).height()>max1) {
                max1 = $(this).height()
            }
        });
        $(".same-height").height(max1);
        //Same height image
        var max2 = 0; 
        //We need to set the height to auto first to get the initial value. 
        $(".same-height-img").css("height", "auto");
        $(".same-height-img").each(function (i){
            if($(this).height()>max2) {
                max2 = $(this).height()
            }
        });
        $(".same-height-img").height(max2);
    } );
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/css/bootstrap.min.css" integrity="sha384-PDle/QlgIONtM1aqA2Qemk5gPOE7wFq8+Em+G/hmo5Iq0CCmYZLv3fVRDJ4MMwEA" crossorigin="anonymous">

<div class="container mt-5">
  <div class="row">
    <div class="col">
      <div class="same-height-img"><img class="rounded mx-auto d-block " src="https://via.placeholder.com/150

C/O https://placeholder.com/ " alt=""></div>
      <h1 class="text-center same-height">The title</h1>
      <p class="text-justify">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Beatae, ad, eos nam fugiat labore quam quibusdam dignissimos. Largerrrrrrrr rrrrrrrrrrrrrrrr rrrrrrrrrrrrrrrrr rrrrrrrrrr
      </p>
    </div>
    <div class="col">
      <div class="same-height-img"><img class="rounded mx-auto d-block " src="https://via.placeholder.com/350

C/O https://placeholder.com/ " alt=""></div>
      <h1 class="text-center same-height">The large large large title</h1>
      <p class="text-justify">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Beatae, ad, eos nam fugiat labore quam quibusdam dignissimos.</p>
    </div>
    <div class="col">
      <div class="same-height-img"><img class="rounded mx-auto d-block " src="https://via.placeholder.com/150

C/O https://placeholder.com/ " alt=""></div>
      <h1 class="text-center same-height">The title</h1>
      <p class="text-justify">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Beatae, ad, eos nam fugiat labore quam quibusdam dignissimos.</p>
    </div>
    <div class="col">
      <div class="same-height-img"><img class="rounded mx-auto d-block " src="https://via.placeholder.com/150

C/O https://placeholder.com/ " alt=""></div>

      <h1 class="text-center same-height">The title</h1>
      <p class="text-justify">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Beatae, ad, eos nam fugiat labore quam quibusdam dignissimos.</p>
    </div>

    <div class="col">
      <div class="same-height-img"><img class="rounded mx-auto d-block " src="https://via.placeholder.com/190

C/O https://placeholder.com/ " alt=""></div>
      <h1 class="text-center same-height">The title</h1>
      <p class="text-justify">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Beatae, ad, eos nam fugiat labore quam quibusdam dignissimos.</p>
    </div>

  </div>
</div>

标签： javascripthtmljquerycssbootstrap-4

Answer 1

如果你需要一组等宽和等高的卡片，你可以使用 Bootstrap 内置的卡片组。因此，您可以尝试使用卡片组，而不是使用行和列：

<div class="container mt-5">
    <div class="card-deck">
        <div class="card">
            <img class="card-img-top" />
            <div class="card-body">
                <h1 class="card-title text-center" />
                <p class="card-text" />
            </div>
        </div>
        <div class="card" />
        <div class="card" />
        <div class="card" />
        <div class="card" />
    </div>
</div>

如果你.card用来包装你的东西，它应该会自动对齐图像。

然后你需要想出一个策略，当标题溢出时该怎么做。我想出的简单策略就是在溢出一行时显示“...”。这样您就可以确定标题会对齐，因为它们只会占用一行。

有一个用于截断文本的 Bootstrap 类.text-truncate：

<div class="card">
    <img class="card-img-top" />
    <div class="card-body">
        <h1 class="card-title text-center text-truncate" />
        ...
    </div>
</div>

这两个更改应该会给您带来如下结果：

演示： https ://jsfiddle.net/davidliang2008/uv4zbomL/34/

我不知道这是否足够好，但至少它会给你一些开始。

更新：完全显示标题

为了使标题完全显示，而不是使用文本溢出技术，您必须将其.card-body显示为列方向的弹性框，以便您可以将卡片标题的边距按钮设置为自动，这会将其他内容推入正文至底部。您可以为此使用 Bootstrap 内置类：d-flex flex-column和mb-auto：

<div class="card">
    <img class="card-img-top" />
    <div class="card-body d-flex flex-column">
        <h1 class="card-title text-center mb-auto" />
        ...
    </div>
</div>

演示： https ://jsfiddle.net/davidliang2008/uv4zbomL/47/