试图在没有重叠的情况下并排制作响应式div。

Question

我对此还不是很有经验，所以这个问题看似微不足道。我试图研究这个问题的修复程序并在这个网站上遇到类似的问题，但它们似乎都不适用于这种特殊情况（也许我错了）。

我要做的是获得一个div，其中包含3个soundcloud歌曲嵌入，位于另一个旁边，其中包含一个twitter feed（分别左右坐）。我希望他们都能做出回应。因此，只要窗口变得比容器的宽度窄，我希望它们都开始响应而不是重叠。

到目前为止，我已将它们彼此相邻。我已经通过将twitter feed定位在soundcloud div上并给予margin-left：auto来完成此操作。我给了他们每个最大宽度，加起来容器的宽度。最大宽度是我能够保持响应的唯一方式。

现在发生的事情是，随着窗口越来越窄，推特提要与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。

只要您使用类似的结构，就可以使用尺寸。