將其旁邊的div向下推到頁面時，使div寬度為100％

Question

CSS專家，我回來了另一個可能很la腳的問題。 我彼此相鄰有兩個div。 我要滿足以下兩個條件：

1. 當頁面上兩個都有足夠的空間時，它們應具有50％的寬度並在同一行上。
2. 如果沒有足夠的空間，則它們應為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%;
  }
}

頁面的寬度小於或等於600像素后，將其更改為100％寬度。