ulとliのレスポンシブルレイアウト - ウィンドウの幅CSS

Question

こんにちは、私はliとレスポンシブなウェブサイトを作ろうとしていますが、それを達成するのは本当に難しいです。私がしたいのは、leftContainerとrightContainerのそれぞれに最大3つのボックスが連続した複数のliボックスがあることです。私は、ウィンドウ幅のサイズを小さくすると、私は彼らが行の2箱ごとと、このような私は多くを減らす、例えば、

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

何かになりたいです。あなたは要素が応答したい場合は、以下の私は

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

Answer 1

を書いたコードは固定幅を避けています。

要素を反応させるために固定幅を与えないでください。次のようにあなたの望ましい結果を達成するために、あなたは、Liの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でのmax-widthを交換している見ることができるように：100％。そして、インライン要素の場合、margin: 0 autoを中央に配置する必要はありません。親要素のtext-align: centerは同じです。