即使調整了瀏覽器的大小，我也試圖使我所有的 div 具有相同的高度。我有 4 個圖示框。每個框都有一個圖示、一個標題和一個描述。我想讓它們都一樣大。這意味著如果圖示容器 div 的最高高度為 100 像素，則所有圖示支架 div 將為 100 像素。下面的代碼正在作業，但如果我在某個時候調整瀏覽器的大小，容器 div 的高度會比實際高度大得多。我做錯了什么？（注意調整大小只會發生在 767 像素以上的螢屏尺寸）謝謝
function allSameHeight(sameSec, sameImg, sameTitle, sameDesc) {
jQuery(sameSec).each(function () {
let highestImg = 0;
let highestTitle = 0;
let highestTxt = 0;
jQuery(sameSec).find(sameImg).each(function () {
if (jQuery(this).height() > highestImg) {
highestImg = jQuery(this).height();
}
});
jQuery(sameSec).find(sameTitle).each(function () {
if (jQuery(this).height() > highestTitle) {
highestTitle = jQuery(this).height();
}
});
jQuery(sameSec).find(sameDesc).each(function () {
if (jQuery(this).height() > highestTxt) {
highestTxt = jQuery(this).height();
}
});
if (jQuery(window).width() > 768) {
jQuery(sameSec).find(sameImg).css("min-height", highestImg);
jQuery(sameSec).find(sameTitle).css("min-height", highestTitle);
jQuery(sameSec).find(sameDesc).css("min-height", highestTxt);
} else {
jQuery(sameSec).find(sameImg).css("min-height", "auto");
jQuery(sameSec).find(sameTitle).css("min-height", "auto");
jQuery(sameSec).find(sameDesc).css("min-height", "auto");
}
});
}
uj5u.com熱心網友回復：
對所有四個專案進行分類。myItem比如我用過。
const setHeights = () => {
let highestHeight = 0;
//Loop through all elements and get the highest height
$('.myItem').each((index, element) => {
if($(element).outerHeight() > highestHeight) {
highestHeight = $(element).outerHeight();
}
});
//Set the height of all elements to highest
$('.myItem').height(highestHeight);
};
$(window).resize(() => {
//Run each time window is resized
setHeights();
});.myItem {
width: 25%;
color: white;
float: right;
}
.one {
background: red;
}
.two {
background: blue;
}
.three {
background: purple;
}
.four {
background: orange;
}
h3 {
word-wrap: break-word;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<button onclick="setHeights()">Make them equal</button>
</div>
<div class="myItem one">
<h3>
aaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaa
aaaaaaaaaa
</h3>
</div>
<div class="myItem two">
<h3>
bbbbbbbb
</h3>
</div>
<div class="myItem three">
<h3>
ccccccccccccccc
ccccccccc
</h3>
</div>
<div class="myItem four">
<h3>
ddddddddddddddd
ddddddddddd
ddddddddddddd
ddddddddddddddd
ddddddddddddddddd
</h3>
</div>uj5u.com熱心網友回復：
對于這種情況，有多種方法，我將提到兩種最常見的（在我看來）：
- https://www.w3schools.com/howto/howto_css_equal_height.asp
- 使用 flexbox：https ://moderncss.dev/equal-height-elements-flexbox-vs-grid/
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/385758.html
標籤：javascript 查询
上一篇：查找特定類的下一個實體的ID