Question

试了一个星期，但仍然无法工作。

以下是演示：

https://myspace.com/discover/trending/2014/01/03/artist-of-the-day-the-jazmin-sisters-are-sonic-siblings/

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

任何人都可以帮助我吗？我使用bootstrap 3，但问题是内容无法从列移动到列自动增加列数。我的网站是一个像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列，但如果浏览器通过调整大小而具有较小的高度，则会自动拆分为2,3列等... 列I的宽度可以由我自己设置，如300px ...

我不知道怎么做:(任何建议或推荐？谢谢兄弟。

Answer 1

Bootstrap适用于宽度列..但我想你可以在CSS上用 @viewport 和 @media 来改变高度。

我从来没有听说过你在尝试什么，但IMO你不需要按高度进行扩展。

具有自动多列的Javascript CSS显示内容

1 个答案: