基本的响应式设计，每列1/2个元素

Question

我遇到了一个问题：我希望基于Sharepoint为内部新闻网站制作非常简单的“响应式设计”。对于小分辨率，每行仅显示1个块的想法，对于更大的分辨率，每行显示2个块。

我想这样做： https://www.dropbox.com/s/v2op6zgccujglcs/4.png

我试图用 Float：left 来做，但在这种情况下效果不好：

https://www.dropbox.com/s/zh9wboi131of01l/3.png

请帮助我找到解决此问题的最佳方案。

Answer 1

我看到你提出的两个潜在问题：

1）“如何使用响应式设计将内容从三列转换为两列？”

和

2）“我在使用内容编排 ...时遇到问题”，本文总结了这一点：http://trentwalton.com/2011/07/14/content-choreography/

我将尝试回答问题1，这基本上是使用媒体查询来调整布局，一旦它低于1000px。

以下是您将放在样式表底部的示例：

@media all and (max-width:999px) {
   .yourDiv { 
      float: none; 
      width: 100%;
   }
   .yourOtherDiv { 
      float: none; 
      width: 100%;
   }
}

无论如何，这是一般的想法。你告诉浮动的div停止浮动，以便它们在内容隧道中堆叠在彼此的顶部。

问题＃2有点难以解释这是否是你所要求的。

如果你发布你的代码，我会很乐意尝试更具体的帮助。