無法獲取CSS第n項工作

我意識到我已經發布了幾個浮動，問題幾乎接近只是對第n項多了一個問題..無法獲取CSS第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; 
    } 
}

enter image description here

來源

2013-10-29 Paul Designer

你想實現什麼？「我需要兩個盒子顯示爲3個等分盒子，而不是兩個」，你是什麼意思？哪兩個盒子？或者你是指專欄？請顯示圖片或示例應該如何。 –

您是否在使用媒體查詢？ –

嗨，thanaks你的幫助。我已添加圖片，是即時通訊媒體查詢 –

在@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-29 10:25:38 Krzysztof

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

來源

2013-10-29 10:32:20 ER144

我寧願跳過@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

來源

2013-10-29 12:31:13

無法獲取CSS第n項工作

回答

相關問題