如何调整列的高度以匹配兄弟列?

Question

我有许多列，每个列包含不同数量的内容。我怎么能自动大小这些，使每一列的高度匹配与最多的内容?

.col {
display: inline-block;
float: left;
width: 200px;
min-height: 100px;
background-color: #eee;
margin-right: 20px;
padding: 10px;
}

<div class="col">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span>
</div>
<div class="col">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
</div>

Answer 1

为了对齐目的，不要在2022中使用float。float用于在文本块中浮动元素，而不是用于对齐目的。使用flexx或CSS-Grid代替。唯一合适的用例是电子邮件模板。

你所需要做的就是将这些列换行，并将display: flex应用于换行元素。

.row {
display: flex;
}
.col {
width: 200px;
min-height: 100px;
background-color: #eee;
margin-right: 20px;
padding: 10px;
}

<div class="row">
<div class="col">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span>
</div>
<div class="col">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
</div>
</div>

Answer 2

• 将内容包装到display:flex。这将使直接子元素变得灵活。用简单的语言设置相邻的if(flex-direction:row)。-然后flex-items子flex容器。现在你的问题已经解决了。但是为了使你的布局更灵活，我将在这里解释flex: 1 0 calc(100% / 3 - 30px);，当你设置flex:1时，它将使所有子尺寸相同。但是如果添加更多的元素，它会通过挤压使它们彼此靠近。为了防止它们在一定大小后挤压，我们使用flex-basis。因此，这里calc(100%/3 - 30px);这里100%/3在minus 30px行中设置了3个子元素，gap:15px也需要从子元素的每一边计数，所以2*15px是30px。-是的，flex-wrap:wrap将第4个元素换行。

.row {
display: flex;
flex-wrap: wrap;
gap: 15px;
/*To give some space*/
}
.row .col {
flex: 1 0 calc(100% / 3 - 30px);
background-color: #eee;
padding: 10px;
}

<div class="row">
<div class="col">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span>
</div>
<div class="col">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
</div>
<div class="col">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt utempor incididunt utempor incididunt utempor incididunt utempor incididunt ut labore et dolore magna aliqua.</span>
</div>
<div class="col">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt utempor incididunt utempor incididunt utempor incididunt utempor incididunt ut labore et dolore magna aliqua.</span>
</div>
</div>