嗨我試圖做一個與li響應的網站，但它很難實現它。我想要做的是每個leftContainer和rightContainer都有多個li箱子，最多連續3個箱子。當我減少窗口寬度的大小，我希望他們能夠成爲2盒中的每一個行，當我減少更多，例如，ul和li的響應式佈局 - 窗口寬度CSS

if($(window).width() <= 700) { 
    // 1 li box each for both leftContainer and rightContainer }

這樣的事情。下面的是，如果你想響應的元素，我已經寫了

http://codepen.io/hk0424/pen/womQxq

來源

2016-12-06 H.Kim

你有沒有考慮過使用媒體查詢或引導類呢？ – Taplar

你應該看看使用'display：flex;' - 它幾乎做你想做的事情。 – junkfoodjunkie

@junkfoodjunkie在所有瀏覽器中不支持display：flex。所以如果你想實現跨界解決方案，那麼'display：flex'不是一個好選擇。請參閱此鏈接（http://caniuse.com/#search=flex）以供參考。 –

避免固定寬度的代碼。

您必須避免給定固定寬度以使元素響應。爲了實現你想要的結果，您可以按如下改變裏的CSS：

html { 
    text-align: center; 
} 

#container { 
    display: inline-block; 
    max-width: 100%; 
    text-align: center; 
} 

#leftContainer{ 
    list-style: none; 
    float:left; 
    left:0px; 
    text-align: center; 
    margin: 0px auto; 
    padding: 0px; 
    display: inline-block; 
    width: 50%; 
    overflow: hidden; 
} 

#rightContainer { 
    float: right; 
    list-style: none; 
    margin: 0px auto; 
    padding: 0px; 
    text-align: center; 
    display: inline-block; 
    width: 50%; 
    overflow: hidden; 
    right:0px; 
} 

#leftContainer li, #rightContainer li{ 
    margin: 0px; 
    padding: 0px; 
    display: inline-block; 
    list-style: none; 

} 

.leftbox, .rightbox{ 
    background-color: grey; 
    width: 185px; 
    height: 150px; 
    margin: 5px; 

}

正如你可以看到我已經取代了在#container的最大寬度爲最大寬度：100％。而對於內聯元素，您不必編寫margin: 0 auto來將它排列在中間，因爲父元素上的text-align: center完全相同。

來源

2016-12-07 05:46:18

有沒有什麼辦法可以通過jquery實現？ –

ul和li的響應式佈局 - 窗口寬度CSS

回答

避免固定寬度的代碼。

相關問題