html - 无法让 CSS 第 n 项起作用

Question

我意识到我已经在 float 上发布了几个问题，几乎只剩下一个关于第 n 学期的问题了..

我正在尝试使用第 n 项和宽度来调整一些响应式 float ，但我正在努力更改以下内容。

当您将屏幕尺寸缩小到 600px 以下时，我需要将两个框显示为 3 个相等的框，而不是两个。我正在努力使用宽度和第 n 项来完成此任务。

我正在努力实现以下目标。

4 boxes above 900px +px
3 boxes above 600px - 900px
2 boxes 460px - 600px
1 box 0- 460px

如果有人能提供帮助那就太好了。

http://jsfiddle.net/sFApC/

.display-box{
  position: relative;
  clear: left;
  background: #fff;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.09);
  -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.09);
  box-shadow: 0 1px 2px rgba(0,0,0,0.09);
  padding: 10px 10px 30px 10px;
  border: 1px solid #d1d1d1;
  }
  .display-box:hover{
    -webkit-box-shadow: 0 10px 6px -6px #b5b5b5;
    -moz-box-shadow: 0 10px 6px -6px #b5b5b5;
    box-shadow: -1px 1px 11px 2px #b5b5b5;
    cursor: pointer;
    border: 1px solid #c6c6c6 ;
  }
  .display-user{
    max-width: 20px !important;
    margin-bottom: 10px;
    float: left;
  }
  .user-name{
    float: left;
    font-weight: bold;
    margin: 6px 0 0 6px;
    }
    .content-upload img{
      height: 20%;
    }

#upload-container {
  width: 100%;
  max-width: 970px;
  margin: 0 auto;
  margin-top: 20px;
}
#upload-container ul {
  width: 100%;
  *zoom: 1;
}
#upload-container ul li {
  float: left;
  margin-right: -100%;
  width: 93%;
}

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

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

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

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

Answer 1

在 @media screen 和 (min-width: 600px) 查询中，您仅指定了 2 列。

快速修复:

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

这不是像素完美的，但您可以看到 3 列。您只需调整边距和宽度即可。

工作示例:http://jsfiddle.net/Ls8c6/1/