我有两个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;
}
}
解决方法
试试这个,它应该按你想要的方式工作.让我知道任何问题.
.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>
