css中4列网格对齐的高度问题答案

【问题标题】：Height issue with 4 column grid alignment in csscss中4列网格对齐的高度问题
【发布时间】：2017-11-20 14:09:40
【问题描述】：

如果我为每列使用不同的内容，问题是想让所有列的高度均匀。我想知道如何固定 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 only solution to set MULTIPLE “same height” row sections on a responsive grid的可能重复
另一个可能的重复Uniform auto items height in flexbox
实际上，问题在于如何将内容包装到块中，尽管每个块都有不同的内容。如何平衡所有块的高度？
如果我要添加 display:flex 属性，它将不起作用。我知道如何根据断点包装它，但我不想为每个断点对齐。
那你需要脚本……或者 CSS Grid 可以做到

标签： html css flexbox

【解决方案1】：

在row 上设置display: flex 可以解决这个问题，然后您可以在header 上删除float，因为它不再有任何作用。

div.row {
  display: flex;
}
div.header {
  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%;
  }
}

<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>

【讨论】：