我的
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>
原文地址:https://www.jb51.cc/css/215091.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。