停止外部div 100％的屏幕寬度

-1

我被困在一些簡單的div的css編碼。我有一個外部div與兩個內部div。我浮動2個內部divs，所以當屏幕寬度低於1200px時，2個內部divs在彼此之上。這一切都很好，我想要的。我遇到的問題是，當屏幕低於1200像素，並且2個內部div位於彼此頂部時，外部div仍然是屏幕寬度的100％。我不想要這個，但希望外部div縮小，始終是內部div的寬度。我嘗試了很多東西，但沒有運氣。謝謝 - 這是我的代碼。停止外部div 100％的屏幕寬度

<style type="text/css"> 
    #Panel { 
     float: left; 
     background: #3CA6F0; 
     padding: 10px; 
    } 
</style> 


<div id="Panel"> 
    <div style="width: 600px; display:inline-block; background-color: #eee;">1</div> 
    <div style="width: 600px; display:inline-block; background-color: #eee;">2</div> 
</div>

來源

2014-06-16 user3745738

你可以做一個代碼或代表你的問題的jsfiddle？ –

http://jsfiddle.net/A43g9/當你最小化屏幕時，你只能看到我的問題 – user3745738

從到目前爲止，我通情達理你的問題，我給了#Panel的float: left CSS屬性的和50%一個width內div秒。

#Panel { 
     background: #3CA6F0; 
    } 
    #Panel > div { 
     width: 50%; 
     background: #ddd; 
     float: left; 
    }

這使得它們彼此相鄰浮動。

Demo here

EDIT

隨着這一段代碼下它：

@media only screen and (max-width: 768px) { 
    #Panel > div { 
     width: 100%; 
}

的2 div旨意堆疊到彼此。

Demo here

來源

2014-06-16 18:53:56 Bas

謝謝，但我想保留我的原始CSS爲內部divs – user3745738

我想內部div的行爲，因爲他們現在做 - 並排在較大的屏幕上，但在較小的屏幕上彼此重疊。我的問題是外部div停留在屏幕寬度，當內部2在較小的屏幕上彼此頂部，並希望外部div只有內部div的寬度。 – user3745738

噢好吧，生病了，當我回家:) – Bas

停止外部div 100％的屏幕寬度

回答

相關問題