试图并排制作响应式 div 而不会重叠。

Question

我在这方面还不是很有经验，所以这个问题可能看起来微不足道。我试图研究解决此问题的方法并在此站点上遇到了类似的问题，但它们似乎都不适用于这种特殊情况（也许我错了）。

我想要做的是让一个包含 3 个 soundcloud 歌曲嵌入的 div 放在另一个包含 twitter 提要的 div 旁边（分别位于左侧和右侧）。我希望他们都做出回应。因此，一旦窗口变得比容器的宽度窄，我希望它们都开始响应而不是重叠。

到目前为止，我已经把它们放在一起了。我通过将 twitter 提要放在 soundcloud div 上并为其赋予 margin-left: auto 来做到这一点。我给了他们一个最大宽度，加起来就是容器的宽度。最大宽度是我能够让它们保持响应的唯一方法。

现在发生的情况是，随着窗口变窄，twitter 提要与 soundcloud 歌曲重叠，直到大约一半。然后 soundncloud 部分开始重新调整大小，直到 twitter 提要完全覆盖它并开始重新调整大小。所以我需要它们同时停留在屏幕上，并随着屏幕变窄而做出响应。

以下是我的 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/

基本上，我们将使用媒体查询来确定我们将如何构建页面。在这个 Fiddle 中，一旦我们达到特定大小及以下，我就会将第三列向下推。在这种情况下，大小为450px。

只要您使用类似的结构，您就可以调整大小。