每行所有列的高度相等
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了每行所有列的高度相等相关的知识，希望对你有一定的参考价值。
首先，我使用bootstrap和jquery。所以我想在所有专栏之后获得第一个儿童课程
var one = $(".col-x .some-class")
那么我想得到所有.some-class高度的高度，并检查它们之间的最高
正在努力实现的目标：
1-获得.some-div之间的最高高度，并通过添加顶部和底部填充使其他高度等于相同的高度
2-我想为每一行创建这个函数，但每行应该得到.some-class的最高高度
如果您不理解我，请告诉我一个代码示例。
这是jsfiddle演示：https://jsfiddle.net/Devel0per95/g2eo4n38/2/
答案
像这样的东西：qazxsw poi？
https://jsfiddle.net/g2eo4n38/4/
另一种方法是使用CSS网格，就像这样（那么你不必使用JS进行样式化，这很好）：
function fixHeight() {
// 1. Find the tallest element
var tallest = 0
$(".blog-item").each(function() {
var height = $(this).height();
if (height > tallest) {
tallest = height;
}
});
// 2. Adjust the height of the elements
$(".blog-item").each(function() {
$(this).height(tallest);
});
}
fixHeight();
#grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 15px;
}
.blog-item{
background-color: #f6f7f7;
border-radius: 3px;
padding: 15px;
margin-bottom: 30px;
}
.blog-item .subtitle-item {
font-weight: bold;
color: #ffbd1f;
}
.blog-item-title{
text-transform: uppercase;
margin-bottom: 30px
}
.blog-item-title h3{color: #333;}
.blog-item-title h3, .blog-item-title p {transition: 0.3s;}
.blog-item-title a:hover h3, .blog-item-title a:hover p {opacity: 0.6;}
.blog-item-body{margin-bottom: 15px;}
.blog-item-tags ul li{
border: 1px solid #dcdcdc;
display: inline-block;
font-size: 12px;
margin-right: 5px;
margin-bottom: 20px;
padding: 5px 10px;
transition: 0.3s;
cursor: pointer;
}
.blog-item-tags ul li:hover{
background-color: #ffbd1f;
color: #fff;
border-color: #ffbd1f;
}
.blog-item a{
text-transform: uppercase;
font-weight: bold;
transition: 0.3s;
}
.blog-item a:hover {color: #ffbd1f;}
.blog-item a .fa{
font-weight: bold;
font-size: 16px;
}
.blog-item.featured{background-color: #ffbd1f;}
.blog-item.featured .blog-item-title p, .blog-item.featured .blog-item-title h3, .blog-item.featured p, .blog-item.featured a {
color: #fff !important;
}
.blog-item.featured ul li {
color: #fff !important;
background-color:#dda114;
border-color: transparent;
}以上是关于每行所有列的高度相等的主要内容，如果未能解决你的问题，请参考以下文章