如何给 Bootstrap col 动态高度？

Question

在这个截图中，我希望 Bootstrap 列的高度由它们的内容定义，而不是在同一行中可见的最高元素。换句话说，我希望这些卡片中的每一个都在最上面的那张下方几个像素处开始，无论最上面的行中是否有一张大卡片。我该怎么做？

.card-container {
  width: 100%;
  overflow: hidden;
  position: relative;
  background-color: white;
  margin-bottom: 15px;
  box-shadow: 0 0 10px rgb(0 0 0 / 30%);
  border: 1px solid rgba(204, 204, 204, 1);
  transition: all 0.5s ease-in-out;
}

.card-container:hover {
  box-shadow: 0 0 10px rgb(0 0 0 / 50%);
}

.card-image {
  max-height: 200px;
  overflow: hidden;
}

.card-image-src {
  width: 100%;
  transition: all 1s ease-in-out;
}

.card-image-src:hover {
  transform: scale(1.1);
}

.card-text {
  padding: 15px;
}

.card-title {
  text-align: center;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container p-3 my-3">
  <div class="row">
    <div class="col-lg-4 col-md-6">
      <div class="card-container">
        <div class="card-image d-flex align-items-center">
          <img src="https://online-learning.harvard.edu/sites/default/files/styles/header/public/course/cs50x-original.jpg" class="card-image-src">
        </div>
        <div class="card-text">
          <h1 class="card-title">
            Harvard CS50
          </h1>
          <p class="card-description">
            This is CS50x , Harvard University's introduction to the intellectual enterprises of computer science and the art of programming for majors and non-majors alike, with or without prior programming experience. An entry-level course taught by David J. Malan,
            CS50x teaches students how to think algorithmically and solve problems efficiently. Topics include abstraction, algorithms, data structures, encapsulation, resource management, security, software engineering, and web development. Languages
            include C, Python, SQL, and JavaScript plus CSS and HTML. Problem sets inspired by real-world domains of biology, cryptography, finance, forensics, and gaming. The on-campus version of CS50x , CS50, is Harvard's largest course. Students who
            earn a satisfactory score on 9 problem sets (i.e., programming assignments) and a final project are eligible for a certificate. This is a self-paced course–you may take CS50x on your own schedule.
          </p>
        </div>
      </div>
    </div>
    <div class="col-lg-4 col-md-6">
      <div class="card-container">
        <div class="card-image d-flex align-items-center">
          <img src="https://online-learning.harvard.edu/sites/default/files/styles/header/public/course/cs50x-original.jpg" class="card-image-src">
        </div>
        <div class="card-text">
          <h1 class="card-title">
            Harvard CS50
          </h1>
          <p class="card-description">
            This is CS50x , Harvard University's introduction to the intellectual enterprises of computer science and the art of programming for majors and non-majors alike, with or without prior programming experience.
          </p>
        </div>
      </div>
    </div>
    <div class="col-lg-4 col-md-6">
      <div class="card-container">
        <div class="card-image d-flex align-items-center">
          <img src="https://online-learning.harvard.edu/sites/default/files/styles/header/public/course/cs50x-original.jpg" class="card-image-src">
        </div>
        <div class="card-text">
          <h1 class="card-title">
            Harvard CS50
          </h1>
          <p class="card-description">
            This is CS50x , Harvard University's introduction to the intellectual enterprises of computer science and the art of programming for majors and non-majors alike, with or without prior programming experience. An entry-level course taught by David J. Malan,
            CS50x teaches students how to think algorithmically and solve problems efficiently. Topics include abstraction, algorithms, data structures, encapsulation, resource management, security, software engineering, and web development. Languages
            include C, Python, SQL, and JavaScript plus CSS and HTML. Problem sets inspired by real-world domains of biology,
          </p>
        </div>
      </div>
    </div>
    <div class="col-lg-4 col-md-6">
      <div class="card-container">
        <div class="card-image d-flex align-items-center">
          <img src="https://online-learning.harvard.edu/sites/default/files/styles/header/public/course/cs50x-original.jpg" class="card-image-src">
        </div>
        <div class="card-text">
          <h1 class="card-title">
            Harvard CS50
          </h1>
          <p class="card-description">
            This is CS50x , Harvard University's introduction to the intellectual enterprises of computer science and the art of programming for majors and non-majors alike, with or without prior programming experience. An entry-level course taught by David J. Malan,
            CS50x teaches students how to think algorithmically and solve problems efficiently. Topics include abstraction, algorithms, data structures, encapsulation, resource management, security, software engineering, and web development. Languages
            include C, Python, SQL, and JavaScript plus CSS and HTML. Problem sets inspired by real-world domains of biology, cryptography, finance, forensics, and gaming. The on-campus version of CS50x , CS50, is Harvard's largest course. Students who
            earn a satisfactory score on 9 problem sets (i.e., programming assignments) and a final project are eligible for a certificate. This is a self-paced course–you may take CS50x on your own schedule.
          </p>
        </div>
      </div>
    </div>
    <div class="col-lg-4 col-md-6">
      <div class="card-container">
        <div class="card-image d-flex align-items-center">
          <img src="https://online-learning.harvard.edu/sites/default/files/styles/header/public/course/cs50x-original.jpg" class="card-image-src">
        </div>
        <div class="card-text">
          <h1 class="card-title">
            Harvard CS50
          </h1>
          <p class="card-description">
            This is CS50x , Harvard University's introduction to the intellectual enterprises of computer science and the art of programming for majors and non-majors alike, with or without prior programming experience. An entry-level course taught by David J. Malan,
            CS50x teaches students how to think algorithmically and solve problems efficiently. Topics include abstraction, algorithms, data structures, encapsulation, resource management, security, software engineering, and web development. Languages
            include C, Python, SQL, and JavaScript plus CSS and HTML. Problem sets inspired by real-world domains of biology, cryptography, finance, forensics, and gaming. The on-campus version of CS50x , CS50, is Harvard's largest course. Students who
            earn a satisfactory score on 9 problem sets (i.e., programming assignments) and a final project are eligible for a certificate. This is a self-paced course–you may take CS50x on your own schedule.
          </p>
        </div>
      </div>
    </div>
    <div class="col-lg-4 col-md-6">
      <div class="card-container">
        <div class="card-image d-flex align-items-center">
          <img src="https://online-learning.harvard.edu/sites/default/files/styles/header/public/course/cs50x-original.jpg" class="card-image-src">
        </div>
        <div class="card-text">
          <h1 class="card-title">
            Harvard CS50
          </h1>
          <p class="card-description">
            This is CS50x , Harvard University's introduction to the intellectual enterprises of computer science and the art of programming for majors and non-majors alike, with or without prior programming experience. An entry-level course taught by David J. Malan,
            CS50x teaches students how to think algorithmically and solve problems efficiently. Topics include abstraction, algorithms, data structures, encapsulation, resource management, security, software engineering, and web development. Languages
            include C, Python, SQL, and JavaScript plus CSS and HTML. Problem sets inspired by real-world domains of biology, cryptography, finance, forensics, and gaming. The on-campus version of CS50x , CS50, is Harvard's largest course. Students who
            earn a satisfactory score on 9 problem sets (i.e., programming assignments) and a final project are eligible for a certificate. This is a self-paced course–you may take CS50x on your own schedule.
          </p>
        </div>
      </div>
    </div>
    <div class="col-lg-4 col-md-6">
      <div class="card-container">
        <div class="card-image d-flex align-items-center">
          <img src="https://online-learning.harvard.edu/sites/default/files/styles/header/public/course/cs50x-original.jpg" class="card-image-src">
        </div>
        <div class="card-text">
          <h1 class="card-title">
            Harvard CS50
          </h1>
          <p class="card-description">
            This is CS50x , Harvard University's introduction to the intellectual enterprises of computer science and the art of programming for majors and non-majors alike, with or without prior programming experience. An entry-level course taught by David J. Malan,
            CS50x teaches students how to think algorithmically and solve problems efficiently. Topics include abstraction, algorithms, data structures, encapsulation, resource management, security, software engineering, and web development. Languages
            include C, Python, SQL, and JavaScript plus CSS and HTML. Problem sets inspired by real-world domains of biology, cryptography, finance, forensics, and gaming. The on-campus version of CS50x , CS50, is Harvard's largest course. Students who
            earn a satisfactory score on 9 problem sets (i.e., programming assignments) and a final project are eligible for a certificate. This is a self-paced course–you may take CS50x on your own schedule.
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

你能检查下面的代码链接吗？希望它对你有用。您只需将height: calc(100% - 15px); 提供给.card-container。

请参考此链接： https://jsfiddle.net/yudizsolutions/zqmxecdo/1/