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

Question

我被困在一些简单的div的css编码上。我有一个带有两个内部div的外部div。我浮动2个内部div，所以当屏幕宽度低于1200px时，2个内部div在彼此的顶部。这一切都很好，我想要的。我遇到的问题是，当屏幕低于1200px且2个内部div在彼此的顶部时，外部div仍然是屏幕宽度的100％。我不想要这个，但希望外部div缩小到始终是内部div的宽度。我尝试过很多东西，但没有运气。谢谢 - 这是我的代码。

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

Answer 1

从目前为止，我完全理解了您的问题，我将div放在#Panel float: left的css属性和width 50%内1}}。

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

这使它们彼此相邻。

Demo here

---

修改

下面有这段代码：

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

2 div将叠加在一起。

Demo here