html - 为什么我的 div 堆叠顺序错误？

Question

当宽度达到@media 声明的指定宽度时，我似乎无法将红色 div 堆栈置于蓝色之上。

.descleft {
    background-color:blue;
    float: right;
    width: 250px;
    min-height: 50px;    
}

.descright {
    overflow: hidden;
    min-height: 50px;
    background-color:red;
}


@media (max-width:700px) {     
   .descleft{
        width:100%;         
   }
    .descright{
        width:100%;       
   }
}

<div class="descleft"></div>
<div class="descright"></div>

http://jsfiddle.net/SpSjL/6580/

Answer 1

我认为实现您想要的功能的最简单方法是使用 flexbox。这是我能够实现它的方法:

HTML

<div class="container">
  <div class="descright"></div> 
  <div class="descleft"></div>
</div>

CSS

.container {
  display: flex;
}

.descleft {
  background-color:blue;
  width: 250px;
  min-height: 50px;
}

.descright {
  overflow: hidden;
  min-height: 50px;
  background-color:red;
  width: 100%;
}


@media (max-width:700px) { 
  .container {
    flex-direction: column;  
  }

  .descleft {
    width:100%; 
  }

  .descright {
    width:100%;
  }
}

您可以在此处找到工作演示:http://jsfiddle.net/SpSjL/6631/

有关 flexbox 的更多信息，请查看此 MDN 链接:https://developer.mozilla.org/en-US/docs/Glossary/Flexbox