不同号码。不同屏幕分辨率的列的列表

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