我有一个移动网站，上面有4条横幅并排出现。当我达到某个特定的屏幕宽度时，我希望它们中的2个降到其他2个以下。部分问题是我习惯于width: 24.96%获得所有4个div的正确总宽度以适合身体。
的CSS
.small_banners .banner_block {
display: block;
max-width: 100%;
height: auto;
width: 24.96%; }
.small_banners {
float: left;
clear: both;
width: 100%;
margin: 0 0 15px; }
的HTML
<div class="small_banners">
<div class="banner_block">
<div>
Content
</div>
</div>
<div class="banner_block">
<div>
2nd piece of content
</div>
</div>
<div class="banner_block">
<div>
3rd piece of content
</div>
</div>
<div class="banner_block">
<div>
The 4th piece of content
</div>
</div>
</div>
当屏幕达到958px时，我希望使用简单的媒体查询将第3个和第4个div降到第1个和第2个以下： @media all and (max-width: 958px) {
这应该工作。
@media (max-width: 958px) {
.small_banners .banner_block{
width:50% !important;
}
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句