我有两个div,左右两边,但是当屏幕小于例如500px时,则左边的div变为底部div而右边的div变为顶部div,DOM中的div应该显示为第二个和第二个div作为第一个。
我使用display: flex
,然后div反转但显示内联并忽略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;
}
}
答案 0 :(得分:7)
我建议将flexbox
用于所有布局(包括桌面和移动设备)。
对于桌面:
.container{
display: flex;
}
对于手机(选项1):
@media (max-width: 500px){
.container{
flex-direction: column; /*display as column*/
}
.left_bottom{
order: 2; /*reorder to bottom*/
width: 100%; /*make full width*/
}
.right_top{
order: 1; /*reorder to top*/
width: 100%; /*make full width*/
}
}
<强> jsFiddle 强>
对于手机(选项2):
@media (max-width: 500px){
.container{
flex-direction: column-reverse; /*column & reverse*/
}
.left_bottom, .right_top{
width: 100%; /*make full width*/
}
}
<强> jsFiddle 强>
答案 1 :(得分:2)
试试这个,它应该按你想要的方式工作。让我知道任何问题。
.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>
答案 2 :(得分:2)
您可以尝试这样的事情:
<div class="container">
<div class="right_top">RIGHT/TOP</div>
<div class="left_bottom">LEFT/BOTTOM</div>
</div>
CSS:
.container {
width:100%;
text-align:center;
}
.left_bottom {
padding:15px 0;
background-color: green;
float:left;
width:33.33%;
}
.right_top {
padding:15px 0;
background-color: blue;
float:right;
width:66.66%;
}
@media (max-width: 500px) {
.left_bottom,
.right_top {
width:100%;
float:none;
clear:both;
}
答案 3 :(得分:1)
将一类order-first
应用于您的红色块,并在CSS媒体查询中应用类似的内容:
.order-first {
order: 1;
}
...假设您使用的是flexbox CSS。