问题描述
如您所见，第二张卡片的标题将图像向下推。 如何动态调整卡片标题的大小以对齐所有图像？ 谢谢。
</head>
<body>
<div class="container-fluid">
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
<div class="col">
<div class="card bg-primary">
<div class="card-body text-center">
<h4 class="card-title">John Doe</h4>
<img class="card-img-top" src="https://www.w3schools.com/bootstrap4/img_avatar1.png" alt="Card image">
<p class="card-text">Some text inside the first card</p>
</div>
</div>
</div>
<div class="col">
<div class="card bg-primary">
<div class="card-body text-center">
<h4 class="card-title">John Doe & other possible long text that pushes the image down </h4>
<img class="card-img-top" src="https://www.w3schools.com/bootstrap4/img_avatar1.png" alt="Card image">
<p class="card-text">Some text inside the second card</p>
</div>
</div>
</div>
<div class="col">
<div class="card bg-primary">
<div class="card-body text-center">
<h4 class="card-title">John Doe </h4>
<img class="card-img-top" src="https://www.w3schools.com/bootstrap4/img_avatar1.png" alt="Card image">
<p class="card-text">Some text inside the third card</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
解决方法
您可以尝试添加类似 style="height: 4vw;" 的内容到h4标题卡，将相同数量的所有图像向下推，使图像从同一级别开始。
,如果卡片顶部的长文本变化太大，难以为每种情况设置一个高度，您可以使用 JavaScript 在第一次加载页面时设置高度并使用侦听器当页面改变大小时。
PagingDataAdapter<Order,OrderAdapter.ViewHolder>(OrdersDiffer)const titleList = document.querySelectorAll(".title-section");
function sizeTitleSections () {
let tallest = 0;
titleList.forEach(element => {
element.style.height = null;
});
titleList.forEach(element => {
let thisHeight = element.clientHeight;
if (thisHeight > tallest) {
tallest = thisHeight;
}
});
titleList.forEach(element => {
element.style.height = tallest + "px";
})
}
sizeTitleSections();
window.addEventListener('resize',sizeTitleSections);我使用了 placeholder.com 的图片，因为 w3schools.com 的图片有时需要一段时间才能加载。