5列背景DIV填充空白空间

时间：2019-05-30 19:45:43

标签： javascript html css

我需要页面上的所有列都显示为相同的高度。如果只有一种背景颜色但有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>

任何帮助将不胜感激。预先感谢。

5 个答案:

答案 0 :(得分：0)

显示子div table-cell，因为您将父div显示为table，然后删除浮点数：

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

答案 1 :(得分：0)

没有得到您要真正实现的目标，但是据我了解，您需要为所有色度提供渐变背景。 ，我认为在bootstrap中，您可以通过设置背景渐变-col-12然后放下col来轻松实现这一目标。像col-3，col-3 ....

答案 2 :(得分：0)

让您的孩子div position:relative，然后将其高度设置为100％。注意：还要在其中添加&nbsp;（如果您没有其他内容可放入其中），因此，可以使用height css属性。 

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

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

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

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

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

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

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

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

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

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

    @media only screen and (max-width: 500px) {
    .col5{
        height:100%;
        position:relative;
        float: left;
        width: 100%;
        background-color: #05A8AA;
    }
    }
<div class="container">
<div class="col1"><br>
&nbsp;</div>
<div class="col2"><br>
&nbsp;</div>
<div class="col3"><br>
&nbsp;</div>
<div class="col4"><br>
&nbsp;</div>
<div class="col5"><br>
&nbsp;</div>
<br><br>
</div>
<p>The green is fine but the rest don't match above themselves</p>

答案 3 :(得分：0)

您正在做很多CSS工作，这使我想知道我提交的内容是否足够，但是：

.container {
  display: flex;
  flex-wrap: wrap;
  height: 100px; // or whatever
}

.container div {
  width: 20%;
  height: 100%;
}

.col1 {
  background-color: red; //or whatever
}

.col2 {
  background-color: orange; //or whatever
}

.col3 {
  background-color: yellow; //or whatever
}

.col4 {
  background-color: blue; //or whatever
}

.col5 {
  background-color: indigo; //or whatever
}

.container .content {
  width: 100%;
}
<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 class="content">Put whatever you want here, including other elements</div>
</div>

答案 4 :(得分：0)

首先，您没有正确设置渐变。

您需要设置颜色的开始和结束值，您确实将所有颜色都设置为20％。

它应该更像是： background: linear-gradient(to right, #91F5AD 20%, #8FBFE0 20%, #8FBFE0 40%, #7C77B9 40%,#7C77B9 60%, #0BC9CD 60%, #0BC9CD 80%, #05A8AA 80%); （不需要写入0％和100％，因为它不会与其他颜色混合）

此处的信息：https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient。

请参见下面的代码段

.container {
        float: left;/* or display:table is fine to deal with floatting child , both is not necessary */
        width: 100%;
        background: linear-gradient(to right,  #91F5AD 20%, #8FBFE0 20%, #8FBFE0 40%, #7C77B9 40%,#7C77B9 60%, #0BC9CD 60%,  #0BC9CD 80%, #05A8AA 80%);
    }

    .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;
    }
    }
    .container>div {background:none!important;}
<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 and also the other gradient colors once start/stop values are set</p>

有关信息，这是一种几乎只有float才可用的方法，称为“仿列”。https://alistapart.com/article/fauxcolumns/

相关问题
最新问题