当旁边的 div 被向下推到页面时，使 div 宽度为 100%答案

【问题标题】：Make div width 100% when the div next to it is pushed down the page当旁边的 div 被向下推到页面时，使 div 宽度为 100%
【发布时间】：2017-02-09 14:10:11
【问题描述】：

CSS 大师们，我又带着另一个可能很蹩脚的问题回来了。我有两个相邻的 div。我想满足以下两个条件：

当页面上有足够的空间容纳两者时，它们应具有 50% 的宽度并位于同一行。
当空间不足时 - 它们的宽度应为 100%，并且彼此重叠。

这是一个 JSFiddle：https://jsfiddle.net/kwg1upu0/5/

HTML：

<div class="container">
 <div class="divOne"></div>
 <div class="divTwo"></div>
</div>

CSS：

.container {
  width: 100%;
}

.divOne { 
  width: 50%;
  min-width: 300px;
  height: 100px;
  background-color: yellow;
  float: left;
}

.divTwo {
  width: 50%;
  min-width: 300px;
  height: 100px;
  background-color: blue;
  float: left;
}

编辑：确实媒体查询是我标记的正确答案。请记住，媒体查询仅适用于页面加载，因此当您调整窗口大小时更改不会动态发生。就我而言，我需要它，所以我必须使用 Angular 和 $window.innerWidth 以编程方式进行。

【问题讨论】：

足够的空间是什么意思？宽度还是高度？
抱歉没有澄清，我指的是宽度。
检查这个：jsfiddle.net/k6o2jpk7
谢谢伙计，这正是我想要的。您可以将其发布为答案，以便我也可以投票。谢谢:)
欢迎@Neekboy :) Np，你的问题已经解决了，这比点赞更重要 :)

标签： css

【解决方案1】：

您可以使用媒体查询。

.container {
  width: 100%;
}

.divOne {
  width: 50%;
  height: 100px;
  background-color: yellow;
  float: left;
}

.divTwo {
  width: 50%;
  height: 100px;
  background-color: blue;
  float: left;
}

@media (max-width: 600px) {
  .divOne, .divTwo {
    width: 100% !important;
  }
}

<div class="container">
 <div class="divOne"></div>
 <div class="divTwo"></div>
</div>

【讨论】：

太棒了！就在昨天我读到有关媒体查询的有趣的事情，应该知道它们。谢谢你的时间，干杯:)
你可以把它标记为答案，这样大家就可以直接看到了:-)
它不允许我再等 4 分钟，一旦冷却时间关闭，将标记为正确答案:)
当屏幕宽度高于 600 像素时，这会给 div 提供 300 像素的固定宽度。您希望每个 div 填充页面 50%。请参阅下面的答案。
@tigerdi 没错，我更新了答案。他只需要将固定宽度更新为百分比宽度。 media query:-) 回答了 OPs 问题

【解决方案2】：

我认为正确执行此操作的唯一方法是使用媒体查询。见小提琴： https://jsfiddle.net/kwg1upu0/6/

@media screen and (max-width:600px) {
  .divOne, .divTwo {
    width:100%;
  }
}

一旦页面宽度为 600px 或更小，则将其更改为 100% 宽度。

【讨论】：