2

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

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

当您将屏幕尺寸减小到 600 像素以下时，我需要将两个框显示为 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;
  }
}

在此处输入图像描述

4

3 回答 3

2

在@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/

于 2013-10-29T10:25:38.290 回答
1

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

尝试更改您的代码，将此代码段用于媒体屏幕和 600 像素的最小宽度：

@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;
    }
}
于 2013-10-29T10:32:20.017 回答
1

我宁愿跳过@media查询，只使用float: lefton .display-box。与 a 一起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

于 2013-10-29T12:31:13.373 回答