我有多行，每一行都有多列，在每一列中我有一個 div 一個段落，該 div 包含一個影像。我需要將具有類cover-bg的div設定為同一行中cover-bg的最低高度第一行中cover-bg的計算高度不能與第二行中的高度相同
<div class="row">
<div class="col-md-4">
<div class="cover-bg"><img src="url"></div>
<p>text here</p>
</div>
<div class="col-md-6">
<div class="cover-bg"><img src="url"></div>
<p>text here</p>
</div>
</div>
<div class="row">
<div class="col-md-5">
<div class="cover-bg"><img src="url"></div>
<p>text here</p>
</div>
<div class="col-md-4">
<div class="cover-bg"><img src="url"></div>
<p>text here</p>
</div>
</div>
我已經嘗試過了，但它設定了所有行的最低高度：
var minHeight = Math.min.apply(null, $('.cover-bg').map(function(){return $(this).height()}));
$('.cover-bg').height(minHeight);
我在操作兄弟姐妹（）和孩子（）時遇到問題
問題是如何分隔和設定每一行的高度
uj5u.com熱心網友回復：
試試這個：
var minHeight = Math.min(...$.map($('.cover-bg'), (e) => ($(e).height())));
$('.cover-bg').height(minHeight);
這是示例。
uj5u.com熱心網友回復：
您需要為每一行設定一個影像高度，否則所有行都將具有相同的高度。
我對建議的 jquery 有點困惑，所以這里有一個片段，它用純 JS 拼寫出來。
對于每一行，它會找到最小影像高度，然后將該行的 CSS 變數屬性設定為該高度。這用于為該特定行中的每個影像設定樣式。
<!doctype html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css">
<style>
.row {
margin-bottom: 20px;
}
.row .cover-bg img:first-child {
height: calc(var(--h) * 1px);
}
</style>
</head>
<body>
<div class="row">
<div class="col-md-4">
<div class="cover-bg"><img src="https://picsum.photos/id/1015/200/500"></div>
<p>
weofijae
<br/> weofjiawef awoeifj awoefij
</p>
</div>
<div class="col-md-6">
<div class="cover-bg"><img src="https://picsum.photos/id/1016/200/1000"></div>
<p>text here</p>
</div>
</div>
<div class="row">
<div class="col-md-5">
<div class="cover-bg"><img src="https://picsum.photos/id/1015/200/300"></div>
<p>text here</p>
</div>
<div class="col-md-4">
<div class="cover-bg"><img src="https://picsum.photos/id/1016/200/200"></div>
<p>text here</p>
</div>
</div>
<script>
function start() {
const rows = document.querySelectorAll('.row');
rows.forEach(row => {
const imgs = row.querySelectorAll('img');
let heights = [];
imgs.forEach(img => {
heights.push(img.height);
});
row.style.setProperty('--h', Math.min.apply(null, heights));
});
}
window.onload = start;
</script>
</body>
</html>注意：您需要等到影像加載完畢才能獲得它們的自然高度。
運行片段完整頁面，否則行可能會換行。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/412968.html
標籤：
下一篇：使元素顯得柔和