Question

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。

Answer 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>

Answer 2

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

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

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

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

2 个答案: