Question

我尝试使用图片制作3列响应式菜单，但当我将#teams .teams宽度更改为百分比时，div消失。请问任何解决方案！？

有我的代码

＆＃13;

#teams .team_select {
  display: table;
  margin: 0 auto 20px auto;
}
#teams #choose {
  display: inline-block;
  /*width: 32.4%;*/
  width: calc(98% / 3);
}
#teams #choose:nth-child(1) {
  margin-right: 1%;
}
#teams #choose:nth-child(2) {
  margin-right: 1%;
}
#teams .teams {
  display: table-cell;
  background-size: cover;
  background-position: center;
  /*width: 360px;
        height: 370px;*/
  width: calc(98% / 3);
  height: auto;
  transition: background-image 1s ease-in-out;
  -webkit-transition: background-image 1s ease-in-out;
  -moz-transition: background-image 1s ease-in-out;
  -o-transition: background-image 1s ease-in-out;
  -pre-transition: background-image 1s ease-in-out;
}
#teams .back {
  background-image: url("https://f4.bcbits.com/img/a3503173982_16.jpg");
}

＆＃13;

<div class="team_select">
  <div id="choose">
    <a href="">
      <div class="teams back"></div>
    </a>
  </div>
  <div id="choose">
    <a href="">
      <div class="teams back"></div>
    </a>
  </div>
  <div id="choose">
    <a href="">
      <div class="teams back"></div>
    </a>
  </div>
</div>

＆＃13;

我也提出了JSFiddle

Answer 1

我找到了解决方案，并制作了短代码，但效果很好。唯一的问题是，min-height他在div之后留下空格，我不知道如何删除它。

<强> HTML

<div id="teams">
    <ul>
        <a href=""><li class="back"></li></a>
        <a href=""><li class="back"></li></a>
        <a href=""><li class="back"></li></a>
    </ul>
</div>

<强> CSS

#teams{
        width:100%;
    }

    #teams ul{
        overflow:auto;
    }

    #teams li{
        list-style:none;
        display:inline-block;
        width: 31%;
        min-height: 700px;
        height: auto;
        background-size: 100%;
        background-repeat: no-repeat;
    }

    li.back{background-image:url("https://f4.bcbits.com/img/a3503173982_16.jpg");}
    li.back:hover{background-image:url("https://designschool.canva.com/wp-content/uploads/sites/2/2015/10/How-To-Use-Blurred-Images-In-Your-Designs-To-Great-Effect_Thumbnail_01.png");}

有新的JSFiddle

百分比宽度不适用于3列

1 个答案: