我有三个<div>
要素:
<div class="foo">A</div>
<div class="foo">B</div>
<div class="foo">C</div>
期望的行为
我想编写一些CSS来随着屏幕尺寸的变化创建以下效果:
不良行为
我知道如何实现以下(不需要的)行为:
div.foo {
display: inline-block;
vertical-align: top;
width: 300px;
}
有没有一种简单的方法(首选没有任何 Javascript 库)来实现我想要的行为,该行为适用于主要浏览器(Chrome、Safari、Firefox、IE9+)?
我认为如果没有额外的包装器 div 和媒体查询这是不可能的。
HTML:
<div class="box-wrap">
<div class="box">a</div>
<div class="box">b</div>
</div>
<div class="box">c</div>
CSS:
.box {
border: 1px solid #000;
float: left;
height: 300px;
width: 300px;
}
.box-wrap {
float: left;
width: 300px;
}
@media (min-width: 900px) {
.box-wrap {
width: auto;
}
}
Demo: http://codepen.io/sdsanders/pen/zLFJj http://codepen.io/sdsanders/pen/zLFJj
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)