-1
问题是如果我为每列使用各种内容，所有列的高度均匀。我想知道如何修复4列的均匀高度。我试图用所有设备型号修复所有列的高度，但某些设备会正确对齐，其余设备不对齐。你能否建议我在我的代码中犯了错误？在CSS中使用4列网格对齐的高度问题
HTML：
<!DOCTYPE html>
<html>
<head>
<title>NXT-255</title>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<div class="row">
<div class="header">
<h1>This is test</h1>
<p>description description description</p>
</div>
<div class="features">
<div class="item">
<h1>This is test</h1>
<p>description description description</p>
</div>
<div class="item">
<h1>This is test</h1>
<p>description description description</p>
</div>
<div class="item">
<h1>This is test</h1>
<p>description description description</p>
</div>
</div>
</div>
</body1>
</html>
CSS：
div.header{
float: left;
min-height: 260px;
background-color: gray;
padding: 10px;
width: 20%;
}
div.features{
display: flex;
min-height: 260px;
padding: 10px;
background-color: lightblue;
}
div.features .item{
flex: 1;
font-size: 20px;
padding-top: 20px;
padding-bottom: 20px;
width: 20%;
}
@media screen and (min-width: 920px) and (max-width: 1240px){
div.header{
float: left;
min-height: 260px;
background-color: yellow;
padding: 10px;
width: 33%;
}
div.features{
display: flex;
min-height: 260px;
padding: 10px;
background-color: lightblue;
}
div.features .item{
flex: 1;
font-size: 20px;
padding-top: 20px;
padding-bottom: 20px;
width: 33%;
}
}
@media screen and (min-width: 620px) and (max-width: 919px){
div.header{
float: left;
min-height: 260px;
background-color: gray;
padding: 10px;
width: 33%;
}
div.features{
display: flex;
min-height: 260px;
padding: 10px;
background-color: lightblue;
}
div.features .item{
flex: 1;
font-size: 20px;
padding-top: 20px;
padding-bottom: 20px;
width: 33%;
}
}
@media screen and (min-width: 520px) and (max-width: 619px){
div.header{
float: left;
min-height: 260px;
background-color: green;
padding: 10px;
width: 33%;
}
div.features{
display: flex;
min-height: 260px;
padding: 10px;
background-color: lightblue;
}
div.features .item{
flex: 1;
font-size: 20px;
padding-top: 20px;
padding-bottom: 20px;
width: 33%;
}
}
[CSS唯一的解决方案设置在响应电网多个“相同的高度”行区域（可能的重复https://stackoverflow.com/questions/44129135/css-only-解决方案 - 设置多个相同高度行部分上的响应格里尔） – LGSon
另一个可能的重复[统一自动项目高度在柔性盒]（https://stackoverflow.com/questions/44563785/uniform -auto-items-height-in-flexbox） – LGSon
实际上，问题是如何将内容封装到块中，但每个块都有各种内容。如何甚至所有块的高度？ – user8128789