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

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

1 个答案: