Html Can'；第n个术语不起作用

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

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

当你把屏幕尺寸减小到600px以下时，我需要两个框显示为3个相等的框，而不是两个。我正在努力使用宽度和第n个术语来实现这一点

我正在努力实现以下目标

900px+px以上的4个盒子
600px-900px以上的3个盒子
2盒460像素-600像素
1盒0-460px

如果有人能帮忙，那就太好了

。显示框{
位置：相对位置；
清除：左；
背景：#fff；
-webkit边界半径：4px；
-moz边界半径：4px；
边界半径：4px；
-网络工具包盒阴影：0 1px2pRGBA（0,0,0,0.09）；
-莫兹盒阴影：0 1px2pRGBA（0,0,0,0.09）；
盒影：0 1px2pRGBA（0,0,0,0.09）；
填充：10px 10px 30px 10px；
边框：1px实心#d1d1；
}
.显示框：悬停{
-网络工具包盒阴影：0 10px 6px-6px#b5；
-moz盒阴影：0 10px 6px-6px#b5；
盒影：-1px11px11px2p5；
光标：指针；
边框：1px实心#C6；
}
.显示用户{
最大宽度：20px！重要；
边缘底部：10px；
浮动：左；
}
.用户名{
浮动：左；
字体大小：粗体；
利润率：6px 0 0 6px；
}
.内容上传img{
身高：20%；
}
#上载容器{
宽度：100%；
最大宽度：970px；
保证金：0自动；
边缘顶部：20px；
}
#上传容器ul{
宽度：100%；
*缩放：1；
}
#上传容器ulli{
浮动：左；
保证金权利：-100%；
宽度：93%；
}
#上传容器ul li a：悬停{
文字装饰：无；
}
#上传容器ulli span{
字体大小：16px；
线高：22px；
显示：块；
填充底部：30px；
}
#上传容器ulli img{
宽度：100%；
}
#上载容器ul li:n子级（1n+1）{
左边缘：0%；
利润底部：5.85%；
明确：两者皆有；
溢出：隐藏；
*缩放：1；
}
@媒体屏幕和屏幕（最小宽度：460像素）{
#上传容器ulli{
浮动：左；
保证金权利：-100%；
宽度：42.08%；
}
#上传容器ulli span{
垫底：10px；
}
#上传容器ul li:n个子（2n+1）{
左边缘：0%；
利润底部：3.85%；
明确：两者皆有；
溢出：隐藏；
*缩放：1；
}
#上传容器ul li:n个子（2n+2）{
左缘：51.93%；
利润底部：3.85%；
明确：无；
}
}
@媒体屏幕和屏幕（最小宽度：600px）{
#上传容器ulli{
浮动：左；
保证金权利：-100%；
宽度：45.08%；
}
#上传容器ulli span{
垫底：10px；
}
#上传容器ul li:n个子（2n+1）{
左边缘：0%；
利润底部：3.85%；
明确：两者皆有；
溢出：隐藏；
*缩放：1；
}
#上传容器ul li:n个子（2n+2）{
左缘：51.93%；
利润底部：3.85%；
明确：无；
}
}
@媒体屏幕和屏幕（最小宽度：900px）{
#上传容器ulli{
浮动：左；
保证金权利：-100%；
宽度：20.8%；
}
#上传容器ulli span{
垫底：0px；
}
#上载容器ul li:n子级（4n+1）{
左边缘：0%；
利润底部：3.85%；
明确：两者皆有；
溢出：隐藏；
*缩放：1；
}
#上载容器ul li:n子级（4n+2）{
左缘：25.96%；
利润底部：3.85%；
明确：无；
}
#上载容器ul li:n子级（4n+3）{
左缘：51.93%；
利润底部：3.85%；
明确：无；
}
#上载容器ul li:n子级（4n+4）{
左缘：77.89%；
利润底部：3.85%；
明确：无；
}
}

---

在

@媒体屏幕和（最小宽度：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列。您必须调整边距和宽度

---

工作示例：

在

@媒体屏幕和（最小宽度：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列。您必须调整边距和宽度

---

工作示例：

您的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;
    }
}

---

您的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;
    }
}

---

我宁愿跳过

@media

查询，只使用

显示框上的
float:left
。再加上一个
宽度：200px
，您将大致得到预期的行为

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

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

如果您想要精确的给定列，我仍然会使用
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%;
    }
}

我宁愿跳过
@媒体
查询，只使用
上的
浮动：左
。显示框
。再加上一个
宽度：200px
，您将大致得到预期的行为

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

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

如果您想要精确的给定列，我仍然会使用
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%;
    }
}

您希望实现什么目标？你说“我需要两个盒子显示为3个相等的盒子，而不是两个”是什么意思？哪两个盒子？还是说专栏？请展示一张图片或一个例子，看看它应该是什么样子。你在使用媒体查询吗？嗨，谢谢你的帮助。我有广告