时间戳

首页 > 解决方案 > 为什么我的 div 以错误的顺序堆叠？

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

问题描述

当宽度从@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/

标签： htmlcssmedia-queries

解决方案

我认为完成你想要的最简单的方法是使用 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

推荐阅读