停止外部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％的屏幕宽度

回答

相关问题