javascript - 5列背景DIV填充空白

Question

我需要页面上的所有栏都显示为相同的高度。如果只有一种背景颜色但有 5 种背景颜色，每种颜色在桌面上占据 20% 的宽度，我会很好地执行此操作。

.container {
    display: table;
    float: left;
    width: 100%;
    background: linear-gradient(to right,  #91F5AD 20%, #8FBFE0 20%, #7C77B9 20%, #0BC9CD 20%, #05A8AA 20%);
}

.col1 {
    float: left;
    width: 20%;
    background-color: #91F5AD;
}

@media only screen and (max-width: 500px) {
.col1{
    float: left;
    width: 100%;
    background-color: #91F5AD;
}
}

.col2 {
    float: left;
    width: 20%;
    background-color: #8FBFE0;
}

@media only screen and (max-width: 500px) {
.col2{
    float: left;
    width: 100%;
    background-color: #8FBFE0;
}
}

.col3 {
    float: left;
    width: 20%;
    background-color: #7C77B9;
}

@media only screen and (max-width: 500px) {
.col3{
    float: left;
    width: 100%;
    background-color: #7C77B9;
}
}

.col4 {
    float: left;
    width: 20%;
    background-color: #0BC9CD;
}

@media only screen and (max-width: 500px) {
.col4{
    float: left;
    width: 100%;
    background-color: #0BC9CD;
}
}

.col5 {
    float: left;
    width: 20%;
    background-color: #05A8AA;
}

@media only screen and (max-width: 500px) {
.col5{
    float: left;
    width: 100%;
    background-color: #05A8AA;
}
}

<div class="container">
<div class="col1"><br></div>
<div class="col2"><br></div>
<div class="col3"><br></div>
<div class="col4"><br></div>
<div class="col5"><br></div>
</div>

我需要容器来复制 DIV 背景的图案，以使其看起来好像高度相同。

如果您看到下面的内容，您就会看到问题所在。

    .container {
        display: table;
        float: left;
        width: 100%;
        background: linear-gradient(to right,  #91F5AD 20%, #8FBFE0 20%, #7C77B9 20%, #0BC9CD 20%, #05A8AA 20%);
    }

    .col1 {
        float: left;
        width: 20%;
        background-color: #91F5AD;
    }

    @media only screen and (max-width: 500px) {
    .col1{
        float: left;
        width: 100%;
        background-color: #91F5AD;
    }
    }

    .col2 {
        float: left;
        width: 20%;
        background-color: #8FBFE0;
    }

    @media only screen and (max-width: 500px) {
    .col2{
        float: left;
        width: 100%;
        background-color: #8FBFE0;
    }
    }

    .col3 {
        float: left;
        width: 20%;
        background-color: #7C77B9;
    }

    @media only screen and (max-width: 500px) {
    .col3{
        float: left;
        width: 100%;
        background-color: #7C77B9;
    }
    }

    .col4 {
        float: left;
        width: 20%;
        background-color: #0BC9CD;
    }

    @media only screen and (max-width: 500px) {
    .col4{
        float: left;
        width: 100%;
        background-color: #0BC9CD;
    }
    }

    .col5 {
        float: left;
        width: 20%;
        background-color: #05A8AA;
    }

    @media only screen and (max-width: 500px) {
    .col5{
        float: left;
        width: 100%;
        background-color: #05A8AA;
    }
    }

<div class="container">
<div class="col1"><br></div>
<div class="col2"><br></div>
<div class="col3"><br></div>
<div class="col4"><br></div>
<div class="col5"><br></div>
<br><br>
</div>
<p>The green is fine but the rest don't match above themselves</p>

如有任何帮助，我们将不胜感激。提前致谢。

Answer 1

显示子 div table-cell，因为父级显示为 table，并移除 float :

.container > div {
display:table-cell;
}

例子:

.container {
  display: table;
  float: left;
  width: 100%;
  background: linear-gradient(to right, #91F5AD 20%, #8FBFE0 20%, #7C77B9 20%, #0BC9CD 20%, #05A8AA 20%);
}

.col1 {
  width: 20%;
  background-color: #91F5AD;
}

.container>div {
  display: table-cell;
}

@media only screen and (max-width: 500px) {
  .col1 {
    width: 100%;
    background-color: #91F5AD;
  }
}

.col2 {
  width: 20%;
  background-color: #8FBFE0;
}

@media only screen and (max-width: 500px) {
  .col2 {
    width: 100%;
    background-color: #8FBFE0;
  }
}

.col3 {
  width: 20%;
  background-color: #7C77B9;
}

@media only screen and (max-width: 500px) {
  .col3 {
    width: 100%;
    background-color: #7C77B9;
  }
}

.col4 {
  width: 20%;
  background-color: #0BC9CD;
}

@media only screen and (max-width: 500px) {
  .col4 {
    width: 100%;
    background-color: #0BC9CD;
  }
}

.col5 {
  width: 20%;
  background-color: #05A8AA;
}

@media only screen and (max-width: 500px) {
  .col5 {
    width: 100%;
    background-color: #05A8AA;
  }
}

<div class="container">
  <div class="col1"><br></div>
  <div class="col2"><br></div>
  <div class="col3"><br></div>
  <div class="col4"><br></div>
  <div class="col5"><br></div>
  <br><br>
</div>
<p>The green is fine but the rest don't match above themselves</p>