Question

我意识到我已经发布了几个有关浮动的问题，几乎在第n个问题上还有一个问题。

我正在尝试使用第n个术语和宽度来调整一些响应浮动，但我正在努力改变以下内容。

当您将屏幕尺寸缩小到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;
  }
}

enter image description here

Answer 1

在@media screen and (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/

Answer 2

您的css不正确，您对最小宽度的媒体屏幕使用相同的内容：460和最小宽度为600的媒体屏幕。

尝试更改代码，将此代码段用于媒体屏幕，最小宽度为600px：

@media screen and (min-width: 600px) {
    #upload-container ul li {
        float: left;
        margin-right: -100%;
        width: 25.8%;
        background-color: green;
    }
    #upload-container ul li span {
        padding-bottom: 0px;
    }
    #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: 30.96%;
        margin-bottom: 3.85%;
        clear: none;
    }
    #upload-container ul li:nth-child(3n+3) {
        margin-left: 61.93%;
        margin-bottom: 3.85%;
        clear: none;
    }
}

Answer 3

我宁愿跳过@media个查询，只需在float: left上使用.display-box。与width: 200px一起，您将获得大致预期的行为。

.display-box {
    float: left;
    width: 200px;
}

当然，这需要一些边距和填充调整。请参见修改后的JSFiddle

如果你想要完全给定的列，我仍然会使用float: left，但是简化媒体查询只需给出.display-box的相对宽度，并将其余的重构为常见的CSS规则

.display-box {
    float: left;
    min-width: 200px;
    width: 80%;
}

@media screen and (min-width: 460px) {
    .display-box {
        width: 40%;
    }
}

@media screen and (min-width: 600px) {
    .display-box {
        width: 25%;
    }
}

@media screen and (min-width: 900px) {
    .display-box {
        width: 17%;
    }
}

JSFiddle

无法使CSS第n个术语起作用

3 个答案: