保持3列内嵌套div的相同高度

Question

我有3列，这些列有相同的部分，例如标题，地址等，我不仅希望卡片有相同的高度，而且嵌套的部分应该有相同的高度，例如，如果在一个部分标题有3行，在第二和第三部分标题应该保持相同的高度，即使它很短。我试过这样做，但到目前为止失败了。

<div class="container">
<div class="card">
<div class="row" style="background-color: yellowgreen;">Hey this is tariq</div>
<div class="row">Hey this is tariq 
Hey this is tariq
Hey this is tariq
Hey this is tariq
</div>
<div class="row">Hey this is tariq asdfa sdfasd asdnasdfnasdfas 
asdf asdnasdfnasdfas fasd
fa
sdfa sdfasd 
asdfaasd 
asdfsa
</div>
<div class="row">Hey this is tariq asdfa sdfasd asdnasdfnasdfas 
asdf asdnasdfnasdfas fasd
fa
sdfa sdfasd Hey this is tariq asdfa sdfasd asdnasdfnasdfas 
asdf asdnasdfnasdfas fasd
fa
sdfa sdfasd 
asdfaasd 
asdfsaHey this is tariq asdfa sdfasd asdnasdfnasdfas 
asdf asdnasdfnasdfas fasd
fa
sdfa sdfasd 
asdfaasd 
asdfsaHey this is tariq asdfa sdfasd asdnasdfnasdfas 
asdf asdnasdfnasdfas fasd
fa
sdfa sdfasd 
asdfaasd 
asdfsaHey this is tariq asdfa sdfasd asdnasdfnasdfas 
asdf asdnasdfnasdfas fasd
fa
sdfa sdfasd 
asdfaasd 
asdfsa
asdfaasd 
asdfsa
</div>
</div>
<div class="card">  <div class="row" style="background-color: yellowgreen;">Hey this is tariq</div>
<div class="row">Hey this is tariq 
Hey this is tariq
Hey this is tariq
Hey this is tariq
</div>
<div class="row">Hey this is tariq asdfa sdfasd asdnasdfnasdfas 
asdf asdnasdfnasdfas fasd
fa
sdfa sdfasd 
asdfaasd 
asdfsa
</div>
<div class="row">Hey this is tariq asdfa sdfasd asdnasdfnasdfas 
asdf asdnasdfnasdfas fasd
fa
sdfa sdfasd Hey this is tariq asdfa sdfasd asdnasdfnasdfas 
asdf asdnasdfnasdfas fasd
fa
sdfa sdfasd 
asdfaasd 
asdfsaHey this is tariq asdfa sdfasd asdnasdfnasdfas 
asdf asdnasdfnasdfas fasd
fa
sdfa sdfasd 
asdfaasd 
asdfsaHey this is tariq asdfa sdfasd asdnasdfnasdfas 
asdf asdnasdfnasdfas fasd
fa
sdfa sdfasd 
asdfaasd 
asdfsaHey this is tariq asdfa sdfasd asdnasdfnasdfas 
asdf asdnasdfnasdfas fasd
fa
sdfa sdfasd 
asdfaasd 
asdfsa
asdfaasd 
asdfsa
</div></div>
<div class="card">  
<div class="row" style="background-color: yellowgreen;">Hey this is tariq 
Hey this is tariq
Hey this is tariq
Hey this is tariq
</div><div class="row">Hey this is tariq asdfa sdfasd asdnasdfnasdfas 
asdf asdnasdfnasdfas fasd
fa
sdfa sdfasd Hey this is tariq asdfa sdfasd asdnasdfnasdfas 
asdf asdnasdfnasdfas fasd
fa
sdfa sdfasd 
asdfaasd 
asdfsaHey this is tariq asdfa sdfasd asdnasdfnasdfas 
asdf asdnasdfnasdfas fasd
fa
sdfa sdfasd 
asdfaasd 
asdfsaHey this is tariq asdfa sdfasd asdnasdfnasdfas 
asdf asdnasdfnasdfas fasd
fa
sdfa sdfasd 
asdfaasd 
asdfsaHey this is tariq asdfa sdfasd asdnasdfnasdfas 
asdf asdnasdfnasdfas fasd
fa
sdfa sdfasd 
asdfaasd 
asdfsa
asdfaasd 
asdfsa
</div>
<div class="row">Hey this is tariq asdfa sdfasd asdnasdfnasdfas 
asdf asdnasdfnasdfas fasd
fa
sdfa sdfasd 
asdfaasd 
asdfsa
</div><div class="row">Hey this is tariq</div>

</div>

</div>
<style>
.container {
display: flex;
gap: 14px;
justify-content: center;
}
.card {
width: 22%;
height: 600px;
background: radial-gradient(black, transparent);
align-self: stretch;
}
.row{
border-bottom: 1px solid;
}
</style>

3列绿色部分高度相同

Answer 1

<div class="container">
<div class="heder">
<div class="row title" style="background-color: yellowgreen;">Hey this is tariq</div>
<div class="row title" style="background-color: yellowgreen;">Hey this is tariq</div>
<div class="row title" style="background-color: yellowgreen;">Hey this is tariq
Hey this is tariq
Hey this is tariq
Hey this is tariq

</div>
</div>
<div class="content">
<div class="card">

<div class="row">Hey this is tariq
Hey this is tariq
Hey this is tariq
Hey this is tariq

</div>
<div class="row">Hey this is tariq asdfa sdfasd asdnasdfnasdfas
asdf asdnasdfnasdfas fasd
fa
sdfa sdfasd
asdfaasd
asdfsa
</div>
<div class="row">Hey this is tariq asdfa sdfasd asdnasdfnasdfas
asdf asdnasdfnasdfas fasd
fa
sdfa sdfasd Hey this is tariq asdfa sdfasd asdnasdfnasdfas
asdf asdnasdfnasdfas fasd
fa
sdfa sdfasd
asdfaasd
asdfsaHey this is tariq asdfa sdfasd asdnasdfnasdfas
asdf asdnasdfnasdfas fasd
fa
sdfa sdfasd
asdfaasd
asdfsaHey this is tariq asdfa sdfasd asdnasdfnasdfas
asdf asdnasdfnasdfas fasd
fa
sdfa sdfasd
asdfaasd
asdfsaHey this is tariq asdfa sdfasd asdnasdfnasdfas
asdf asdnasdfnasdfas fasd
fa
sdfa sdfasd
asdfaasd
asdfsa
asdfaasd
asdfsa
</div>

</div>
<div class="card">

<div class="row">Hey this is tariq
Hey this is tariq
Hey this is tariq
Hey this is tariq

</div>
<div class="row">Hey this is tariq asdfa sdfasd asdnasdfnasdfas
asdf asdnasdfnasdfas fasd
fa
sdfa sdfasd
asdfaasd
asdfsa
</div>
<div class="row">Hey this is tariq asdfa sdfasd asdnasdfnasdfas
asdf asdnasdfnasdfas fasd
fa
sdfa sdfasd Hey this is tariq asdfa sdfasd asdnasdfnasdfas
asdf asdnasdfnasdfas fasd
fa
sdfa sdfasd
asdfaasd
asdfsaHey this is tariq asdfa sdfasd asdnasdfnasdfas
asdf asdnasdfnasdfas fasd
fa
sdfa sdfasd
asdfaasd
asdfsaHey this is tariq asdfa sdfasd asdnasdfnasdfas
asdf asdnasdfnasdfas fasd
fa
sdfa sdfasd
asdfaasd
asdfsaHey this is tariq asdfa sdfasd asdnasdfnasdfas
asdf asdnasdfnasdfas fasd
fa
sdfa sdfasd
asdfaasd
asdfsa
asdfaasd
asdfsa
</div>
</div>

<div class="card">

<div class="row">Hey this is tariq asdfa sdfasd asdnasdfnasdfas
asdf asdnasdfnasdfas fasd
fa
sdfa sdfasd Hey this is tariq asdfa sdfasd asdnasdfnasdfas
asdf asdnasdfnasdfas fasd
fa
sdfa sdfasd
asdfaasd
asdfsaHey this is tariq asdfa sdfasd asdnasdfnasdfas
asdf asdnasdfnasdfas fasd
fa
sdfa sdfasd
asdfaasd
asdfsaHey this is tariq asdfa sdfasd asdnasdfnasdfas
asdf asdnasdfnasdfas fasd
fa
sdfa sdfasd
asdfaasd
asdfsaHey this is tariq asdfa sdfasd asdnasdfnasdfas
asdf asdnasdfnasdfas fasd
fa
sdfa sdfasd
asdfaasd
asdfsa
asdfaasd
asdfsa
</div>
<div class="row">Hey this is tariq asdfa sdfasd asdnasdfnasdfas
asdf asdnasdfnasdfas fasd
fa
sdfa sdfasd
asdfaasd
asdfsa
</div>
<div class="row">Hey this is tariq</div>

</div>
</div>


</div>

<style>
.container {
display: flex;
flex-direction: column;
/* gap: 14px; */
/* justify-content: center; */
}

.heder {
display: flex;
justify-content: center;
}

.heder .title {
width: 22%;
height: auto;
margin: 0 10px;
}

.content {
display: flex;
justify-content: center;
}

.content .card {
margin: 0 10px;
}

.card {
width: 22%;
height: 600px;
background: radial-gradient(black, transparent);
align-self: stretch;
}

.row {
border-bottom: 1px solid;
}

.title {
height: fit-content;
}

</style>

Answer 2

。行{font - family:宋体}试试这个

Answer 3

JavaScript解决方案

该脚本获取行的所有高度值，并将每个行类型的最高值存储在数组中。然后将所有行设置为最高的高度值。

const container = document.getElementsByClassName("container")[0];
const cards = container.children;
let requiredHeights = [];
const getRequiredHeights = (cards) => {
[...cards].map((card) => {
rows = card.children;
[...rows].map((row, index) => {
let height = 0
if(requiredHeights[index]!=undefined) {
height = requiredHeights[index];
}
let rowHeight = row.offsetHeight;
if(rowHeight > height) {
requiredHeights[index] = rowHeight;
}
})
}) 
}
const setRowHeights = (cards) => {
[...cards].map(card => {
rows = card.children;
[...rows].map((row, index) => {
row.style.height = requiredHeights[index] + 'px';
console.log(row.style.height);
})
})
}
getRequiredHeights(cards);
setRowHeights(cards);

查看显示解决方案的代码依赖:https://codepen.io/Nadir_Alishly/pen/GRYKREp