不同號碼。不同屏幕分辨率的列的列表

Question

我使用引導程序響應創建網站。 在頁面中間，有一個包含許多框的div。

要求是

1. 在一個大屏幕上我應該把3盒每行，一箇中等大屏幕上我應該把2個箱每行，在小屏幕上我應該把每1盒行。
2. 盒子寬度（所有盒子的寬度相同）應始終最大化以填滿div的整個寬度。

麻煩是我可以滿足每個要求，但不是兩個。

爲了僅滿足1，我可以爲每個框指定固定寬度，並讓它們向左浮動，但框不會調整大小。

只能滿足2，我可以使用自舉類跨度在包裝盒上（使用父DIV排液），並在框將始終根據分辨率調整，但沒有。每行盒子總是相同的。

我如何同時滿足1和2？

Answer 1

添加獨特class或id到要消失了..請帶着我的Demo

希望這有助於

注一看箱子：看到效果滾動小提琴擴大屏幕寬度

更新

HTML

<div class="wrapper"> 
    <div class="box1"></div> 
    <div class="box2"></div> 
    <div class="box3"></div> 
    <div class="box3"></div> 
</div> 

CSS

.wrapper { 
    width:100%; 
    float:left; 
} 
.wrapper div { 
    float:left; 
    width:22%; 
    border:1px solid red; 
    height:100px; 
    margin:0 2% 0 0; 
} 

@media screen and (max-width: 368px){ 

    .wrapper div { 
     width:45%; 
     margin:10px 2% 0 0; 
    } 
} 

工作demo