Css 将旁边的div向下推到页面时，使div宽度为100%

CSS专家们，我回来问另一个可能是蹩脚的问题。我有两个沙发紧挨着。我想满足以下两个条件：

当页面上有足够的空间容纳这两个对象时，它们应具有50%的宽度并位于同一行上

当没有足够的空间时，它们应该是100%的宽度，并且相互重叠

下面是一个JSFIDLE：

HTML:

---

编辑：事实上，媒体查询是我标记的正确答案。请记住，媒体查询仅在页面加载时应用，因此在调整窗口大小时不会动态发生更改。在我的例子中，我需要它，所以我必须用Angular和$window.innerWidth编程

您可以使用媒体查询

.container{
宽度：100%；
}
.迪翁{
宽度：50%；
高度：100px；
背景颜色：黄色；
浮动：左；
}
第二名{
宽度：50%；
高度：100px；
背景颜色：蓝色；
浮动：左；
}
@介质（最大宽度：600px）{
.divOne.divTwo{
宽度：100%！重要；
}
}

---

您可以使用媒体查询

.container{
宽度：100%；
}
.迪翁{
宽度：50%；
高度：100px；
背景颜色：黄色；
浮动：左；
}
第二名{
宽度：50%；
高度：100px；
背景颜色：蓝色；
浮动：左；
}
@介质（最大宽度：600px）{
.divOne.divTwo{
宽度：100%！重要；
}
}

---

我认为唯一正确的方法是使用媒体查询。 参见小提琴：

---

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

我认为唯一正确的方法是使用媒体查询。 参见小提琴：

---

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

足够的空间是什么意思？宽度还是高度？抱歉没有澄清，我指的是宽度。检查一下：谢谢，伙计，这正是我想要的。你可以把它贴出来作为答案，这样我也可以投票表决。谢谢：）欢迎@Neekboy:）Np，你的问题解决了，这比投票更重要：）你说的足够空间是什么意思？宽度还是高度？抱歉没有澄清，我指的是宽度。检查一下：谢谢，伙计，这正是我想要的。你可以把它贴出来作为答案，这样我也可以投票表决。谢谢：）欢迎@Neekboy:）Np，你的问题解决了，这比投票更重要：）太棒了！有趣的是，就在昨天，我读到了关于媒体提问的文章，我应该想到这些问题。谢谢您的时间，干杯：）您可以将其标记为答案，这样每个人都可以直接看到：-）不允许我再等待4分钟，冷却结束后将标记为正确答案：）当屏幕宽度超过600px时，这将使div的固定宽度为300px。你想让div各占50%。看下面我的答案。@tigerdi是的，我更新了答案。他只需要将固定宽度更新为percantage宽度。OPs问题得到了

媒体查询的回答

：-）太棒了！有趣的是，就在昨天，我读到了关于媒体提问的文章，我应该想到这些问题。谢谢您的时间，干杯：）您可以将其标记为答案，这样每个人都可以直接看到：-）不允许我再等待4分钟，冷却结束后将标记为正确答案：）当屏幕宽度超过600px时，这将使div的固定宽度为300px。你想让div各占50%。看下面我的答案。@tigerdi是的，我更新了答案。他只需要将固定宽度更新为percantage宽度。通过

媒体查询

：-）回答了OPs问题

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

.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;
}

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