html - 如何给 Bootstrap col 动态高度？

问题描述

在这个截图中，我希望 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>

标签： htmlcsstwitter-bootstrapflexbox

html - 如何给 Bootstrap col 动态高度？

问题描述

解决方案

推荐阅读