我的
HTML类似于以下示例
<div id="wrapper"> <div id="a">a</div> <div id="b">b</div> <div id="c">c</div> <div id="d">d</div> </div>
在桌面上,我希望div显示在彼此旁边,这当然是微不足道的.
在移动设备上,我希望有类似于下面的表格式布局
b,c和d具有灵活的高度,因此必须适应.
如果没有将b,c和d包装在一个单独的div中,这可能吗？
解决方法
是的,你可以用flexBox完全做到这一点……当然你需要在较小的视口尺寸上决定第一个div的宽度,但我认为你已经准备好了所需的媒体查询.
#wrapper {
height: 100vh;
width: 90vw;
border: 1px solid grey;
display: flex;
flex-direction: column;
flex-wrap: wrap;
margin: 10px auto;
}
#wrapper div {
flex: 1 0 auto;
border: 1px solid white;
background: lightblue;
text-align: center;
}
#a {
flex-grow: 1;
height: 100%;
flex-basis: 50%;
}
@media screen and (min-width: 640px) {
#a {
height: auto;
flex-grow: none;
flex-basis: auto;
}
}
<div id="wrapper"> <div id="a">a</div> <div id="b">b</div> <div id="c">c</div> <div id="d">d</div> </div>
