響應CSS容器輸球利潤率只有

我已經得到了下面的CSS其目的是調整到中等大小有一定的列數，則全角項目在小/移動尺寸。一切似乎工作，不同之處在於在所述外容器上的介質/片劑大小，邊距（例如），具有.columnContainer類，顯然丟棄。響應CSS容器輸球利潤率只有

我用盡了一切我能想到的算出這個，並撞到南牆。在此先感謝您的幫助，您可以用CSS在這裏玩：https://jsfiddle.net/xvLmhfpa/

// This is getting stripped at medium size only! 
.columnContainer { margin-top: 20px } 

// Large size 
@media all and (min-width: 768px) { 

    .columnContainer { 
    display: table; 
    width: 100%; 
    } 
    .columnContainer > div { 
    display: table-cell; 
    } 

} 

// Medium/tablet size 
@media all and (max-width: 767px) and (min-width: 481px) { 

    .columnContainer { 
    width: 100%; 
    } 

    .columnContainer > div { 
    float: left; 
    width: 100%; 
    } 

    .columnContainer.collapse2 > div { width: 50%; } 
    .columnContainer.collapse2 div:nth-child(2n+1) { clear: both; } 
    .columnContainer.collapse3 > div { width: 33.33%; } 
    .columnContainer.collapse3 div:nth-child(3n+1) { clear: both; } 
    .columnContainer.collapse4 > div { width: 25%; } 
    .columnContainer.collapse4 div:nth-child(4n+1) { clear: both; } 
    .columnContainer.collapse5 > div { width: 20%; } 
    .columnContainer.collapse5 div:nth-child(5n+1) { clear: both; } 
    .columnContainer.collapse6 > div { width: 20%; } 
    .columnContainer.collapse6 div:nth-child(5n+1) { clear: both; } 
} 

// Small/mobile size 
@media all and (max-width: 480px) { 
    .columnContainer > div { width: 100% } 
}

來源

2017-09-13 Iucounu

它，因爲你必須在你的中等大小float:left .. 在div添加display:inline-block ..

@media all and (max-width: 767px) and (min-width: 481px) { 

.columnContainer { 
    width: 100%; 
    display:inline-block; 
    } 

    .columnContainer > div { 
    float:left; 
    width: 100%; 
    }

這裏是更新fiddle ..

來源

2017-09-13 07:56:47

非常感謝您！ – Iucounu

響應CSS容器輸球利潤率只有

回答

相關問題