-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