使div寬度達到100％時，旁邊的div被推下頁面

CSS大師，我回來了與另一個可能跛腳的問題。我在海誓山盟旁邊有兩個div。我想要滿足以下兩個條件：使div寬度達到100％時，旁邊的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。

來源

2017-02-09 Neekoy

你是指足夠的空間是什麼意思？寬度或高度？ –

對不起，我是指寬度。 – Neekoy

選中此：https://jsfiddle.net/k6o2jpk7/ –

您可以使用媒體查詢。

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

來源

2017-02-09 14:17:18 DomeTune

太棒了！有趣的事情，就在昨天我閱讀媒體查詢，應該有他們。謝謝你的時間，歡呼:) – Neekoy

你可以把它標記爲答案，所以每個人都會直接看到它:-) – DomeTune

它不允許我再等4分鐘，一旦冷卻時間就會標記爲正確答案關閉:) – Neekoy

我認爲，正確地做到這一點的唯一方法是使用媒體查詢。見小提琴： https://jsfiddle.net/kwg1upu0/6/

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

一旦頁面的寬度爲600像素或更小，然後將其更改到100％的寬度。

來源

2017-02-09 14:20:50 tigerdi

使div寬度達到100％時，旁邊的div被推下頁面

回答

相關問題