Question

我找到了一些代码，但想要改变CSS，一次只能在页面上显示两个框。

有些人可以向我解释当您更改屏幕尺寸时如何更改媒体查询css以仅显示两个框。

我做了一个小提示来展示我的工作。

#upload-container-two {
  width: 100%;
  max-width: 970px;
  margin: 0 auto;
  margin-top: 20px;

}
#upload-container-two ul {
  width: 100%;
  *zoom: 1;
}
#upload-container-two ul li {
  float: left;
  margin-right: -100%;
  width: 93%;
}

#upload-container-two ul li a:hover {
  text-decoration: none;
}

#upload-container-two ul li span {
  font-size: 16px;
  line-height: 22px;
  display: block;
  position: absolute;
  bottom: 13px;
  display: none;
}
#upload-container-two ul li img {
  width: 100%;
}
#upload-container-two ul li:nth-child(2n+0) {
  margin-left: 0%;
  margin-bottom: 5.85%;
  clear: both;
  overflow: hidden;
  *zoom: 1;
}

@media screen and (min-width: 460px) {
  #upload-container-two ul li {
    float: left;
    margin-right: -100%;
    width: 42.08%;
  }
  #upload-container-two ul li span {
    padding-bottom: 10px;
  }
  #upload-container-two ul li:nth-child(1n+1) {
    margin-left: 0%;
    margin-bottom: 3.85%;
    clear: both;
    overflow: hidden;
    *zoom: 1;
  }
  #upload-container-two ul li:nth-child(2n+2) {
    margin-left: 51.93%;
    margin-bottom: 3.85%;
    clear: none;
  }
}
@media screen and (min-width: 750px) {
  #upload-container-two ul li {
    float: left;
    margin-right: -100%;
    width: 27.73%;
  }
  #upload-container-two ul li span {
    padding-bottom: 10px;
  }
  #upload-container-two ul li:nth-child(2n+1) {
    margin-left: 0%;
    margin-bottom: 3.85%;
    clear: both;
    overflow: hidden;
    *zoom: 1;
  }
  #upload-container-two ul li:nth-child(2n+2) {
    margin-left: 34.29%;
    margin-bottom: 3.85%;
    clear: none;
  }
  #upload-container-two ul li:nth-child(2n+3) {
    margin-left: 68.59%;
    margin-bottom: 3.85%;
    clear: none;
  }
}

@media screen and (min-width: 900px) {
  #upload-container-two ul li {
    float: left;
    margin-right: -100%;
    width: 20.8%;
  }
  #upload-container-two ul li span {
    padding-bottom: 0px;
  }
  #upload-container-two ul li:nth-child(2n+1) {
    margin-left: 0%;
    margin-bottom: 3.85%;
    clear: both;
    overflow: hidden;
    *zoom: 1;
  }
  #upload-container-two ul li:nth-child(2n+2) {
    margin-left: 25.96%;
    margin-bottom: 3.85%;
    clear: none;
  }
  #upload-container-two ul li:nth-child(2n+3) {
    margin-left: 51.93%;
    margin-bottom: 3.85%;
    clear: none;
  }
  #upload-container-two ul li:nth-child(2n+4) {
    margin-left: 77.89%;
    margin-bottom: 3.85%;
    clear: none;
  }
}

Answer 1

添加两个容器来播放float：none。不要忘记你的明确：两个班级。

My Codepen

<div id="main">

<div class="col">
  <ul>
    <li>coucou</li>
    <li>coucou</li>
    <li>coucou</li>
    <li>coucou</li>
    <li>coucou</li>    
  </ul>

    <ul>
    <li>coucou</li>
    <li>coucou</li>
    <li>coucou</li>
    <li>coucou</li>
    <li>coucou</li>    
  </ul>
      <div class="clear"></div>
  </div> 

  <div class="col">
    <ul>
    <li>coucou</li>
    <li>coucou</li>
    <li>coucou</li>
    <li>coucou</li>
    <li>coucou</li>    
  </ul>

  <ul>
    <li>coucou</li>
    <li>coucou</li>
    <li>coucou</li>
    <li>coucou</li>
    <li>coucou</li>    
  </ul>
    <div class="clear"></div>
</div> 

<div class="clear"></div>  
</div>

如何更改媒体查询

1 个答案: