html – 如何颠倒媒体查询中元素的顺序?
发布时间:2020-12-14 18:49:13 所属栏目:资源 来源:网络整理
导读:我有两个div,左边和右边,但是当屏幕小于例如500px时,左边的div变成底部div而右边的div变成顶部div,DOM中的div首先显示为第二个和第二个div. 我使用display:flex,然后divs反转但显示内联并忽略100%宽度.怎么了? HTML div class='nav' div class='container
我有两个div,左边和右边,但是当屏幕小于例如500px时,左边的div变成底部div而右边的div变成顶部div,DOM中的div首先显示为第二个和第二个div.
我使用display:flex,然后divs反转但显示内联并忽略100%宽度.怎么了? HTML <div class='nav'> <div class='container'> <div class='left_bottom'> LEFT/BOTTOM </div> <div class='right_top'> RIGHT/TOP </div> </div> </div> CSS .nav{ background-color: red; } .container{ width: 100%; } .left_bottom{ padding: 15px 0 15px 0; background-color: green; float: left; width: 33.33%; text-align: center; } .right_top{ padding: 15px 0 15px 0; background-color: blue; float: right; width: 66.66%; text-align: center; } @media (max-width: 500px){ .left_bottom{ float: left; width: 100%; } .right_top{ float: left; width: 100%; } .container{ display: flex; flex-direction: row-reverse; } } JS FIDDLE 解决方法
试试这个,它应该按你想要的方式工作.让我知道任何问题.
.nav{ background-color: red; } .container{ width: 100%; } .left_bottom{ padding: 15px 0 15px 0; background-color: green; float: left; width: 33.33%; text-align: center; } .right_top{ padding: 15px 0 15px 0; background-color: blue; float: right; width: 66.66%; text-align: center; } @media (max-width: 500px) { .left_bottom{ float: left; width: 100%; } .right_top{ float: left; width: 100%; } } <div class='nav'> <div class='container'> <div class='right_top'> RIGHT/TOP </div> <div class='left_bottom'> LEFT/BOTTOM </div> </div> </div> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |