試圖使響應div並排重疊。

Question

我在這方面還不是很有經驗，所以這個問題可能看起來微不足道。我試圖研究這個問題的解決方法，並在這個網站上遇到類似的問題，但沒有一個似乎適用於這種特殊情況（也許我錯了）。

我想要做的是獲得一個div，其中包含3個soundcloud歌曲嵌入，坐在旁邊，其中包含一個twitter飼料（分別坐在左側和右側）。我希望他們都有迴應。因此，只要窗口比容器的寬度窄，我希望它們都開始響應並且不會重疊。

到目前爲止，我已經把它們放在了一起。我已經通過將twitter feed定位到soundcloud div並給它留下了餘量來做到這一點：auto。我給他們每個最大寬度加起來就是容器的寬度。最大寬度是我能夠保持響應的唯一方式。

現在發生的事情是，隨着窗口變窄，twitter feed與soundcloud歌曲重疊，直到中間點。然後soundncloud部分開始重新調整大小，直到twitter feed完全重疊並開始重新調整大小。所以我需要他們同時留在屏幕上，並且隨着屏幕變窄而響應。

這裏就是我有我的CSS：

#topcontainer { 
max-width: 960px; 
position: relative; 
margin: 0 auto; 
} 

#twitterfeed { 

max-width: 350px; 
position: relative; 
top: -599; 
margin-left: auto; 
} 

.soundcloud { 
max-width: 610px; 
margin-right: auto; 
} 

Answer 1

下面是一個簡單的柱網系統，你也許可以納入你的設計。

http://jsfiddle.net/3k7xY/1/

基本上，我們將使用媒體查詢來確定我們將如何構建的頁面。在這個小提琴中，當我們達到一定大小和以下時，我推下第三列。在這種情況下，尺寸爲450px。

只要你使用類似的結構，你可以使用大小來玩。