当空间不足时浮动的并排元素会下降到自己的行

Question

我在另一个 div 中有两个 div，宽度为 50%。我在这些 div 上设置了最小宽度，因此当页面宽度变得太小时，它们不再并排放置并垂直堆叠。如果可能的话，我想要一个纯 CSS 解决方案，以使内部 div 在它们分成自己的行后立即具有 100% 的宽度。

我做了一个代码 sn-p 来说明我的意思：

#container {
  resize: both;
  overflow: auto;
  background-color: blue;
}

.yellow{
  background-color: yellow;
}

.red{
  background-color: red;
}

.width-50 {
  min-width: 200px;
  float: left;
  width: 50%;
}

<div id="container">
  <div class="width-50 yellow">
    Div 1
  </div>
  <div class="width-50 red">
    Div 2
  </div>
</div>

如果你抓住调整大小手柄并缩小父 div 的宽度，最终 div 没有空间并排堆叠，但它们不会填满父 div 的整个宽度。

Answer 1

您可以使用CSS3 media query

首选移动优先方法，在您的情况下，您应该使用媒体断点：

.width-50 {
  // mobile css
}
@media (min-width: 500px){
.width-50 {
  width: 50%;
}

}