Question

如果我为每列使用各种内容，问题是想要为所有列设置均匀的高度。我想知道如何修复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%;
        }
    }

Answer 1

在display: flex上设置row即可解决此问题，然后您可以删除float上的header，因为它不再执行任何操作。

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>

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

1 个答案: