Javascript CSS，自动显示内容的多列

试了一个星期，还是不起作用

以下是演示：

例如，如果调整浏览器大小并更改“高度”，则列数将自动增加“高度”，而“宽度”保持不变

有人能帮我吗？我使用的是Bootstrap3，但问题是内容无法从一列移动到另一列以自动增加列数。我的网站是一个类似myspace的幻灯片，触摸屏从左向右移动

**我需要找到一种方法，自动将内容拆分为多列，列数基于浏览器的高度值

例如：

<div id="contaner">
   <h3>Title 1</h3>
   <p>Content Here</p>
  <p>Content Here</p>
  <p>Content Here</p>
   <p>Content Here</p>

 <h3>Title 1</h3>
   <p>Content Here</p>
  <p>Content Here</p>
  <p>Content Here</p>
   <p>Content Here</p>

 <h3>Title 1</h3>
   <p>Content Here</p>
  <p>Content Here</p>
  <p>Content Here</p>
   <p>Content Here</p>


 <h3>Title 1</h3>
   <p>Content Here</p>
  <p>Content Here</p>
  <p>Content Here</p>
   <p>Content Here</p>
</div>

标题1
满足于此

满足于此

满足于此

满足于此

标题1
满足于此

满足于此

满足于此

满足于此

标题1
满足于此

满足于此

满足于此

满足于此

标题1
满足于此

满足于此

满足于此

满足于此

如果浏览器具有足够的高度，它将显示为1列，但如果浏览器通过调整大小具有较小的高度，它将自动拆分为2、3列，等等。。。 我可以自己设置列宽，比如300px

---

我不知道该怎么做：（有什么建议或建议吗？谢谢兄弟们。

引导可以在宽度列上工作。但我想你可以在CSS上使用@视口和@媒体来改变高度

---

我从来没有听说过你在尝试什么，但在我看来，你不需要按高度缩放。

你的代码太大了，你不能更具体一点，并提供代码示例。现在，我正在使用bootstrap将列存储为CSS。但我需要找到一种方法，将内容拆分为多个列，列数自动计算为by浏览器的高度值。