Javascript 创建类似WPF的水平布局'；s WrapPanel（网络设计）

我希望以水平而不是垂直的方式表示新闻网站的新闻。当有人打开页面时，他们会看到几篇文章，而不是向下滚动，文章列表应该向左或向右滚动。这在平板电脑上看起来应该很酷，因为它让你感觉就像在滚动图片一样，它也有Windows8中的新闻阅读器应用程序的感觉。（例如：）

我的新闻文章有一个固定的宽度，但是高度可以根据文章的长度而变化。我希望它们向下对齐，当它们到达其父div的末尾时，它们应该向右环绕并从那里继续，这与WPF WrapPanel的方向设置为垂直时的行为非常相似

这就是我现在拥有的（框有蓝色背景，以便更容易看到边界）

这就是我想要的（基于上图的Photoshop模型）：

为了重述和澄清，这里是我的代码

我的HTML布局和代码

• div#wrap：获取我的浏览器窗口的完整宽度
• div#newswrap：内部#wrap，非常大的宽度来存放我的新闻项目，水平滚动条
• 分区柱：固定宽度的单柱

  <div id="wrap">
  <div id="newswrap">
     <div class="post">
      <div class="title">Lorem Ipsum Dolor</div>
      <div class="postcontent"><p>Lorem ipsum *text text*</p></div>
     </div>
  
     <div class="post">
      <div class="title">Lorem Ipsum Dolor</div>
      <div class="postcontent"><p>Lorem ipsum *text text*</p></div>
     </div>
  </div>
  </div>
  

  我尝试使用display:inline块，但也不起作用。看起来很简单，但我似乎找不到办法。我们将非常感谢您的帮助
  附加问题

  ---

  我可以用jQuery/JS捕捉滚动事件，这样当我向下滚动时新闻包装就会滚动吗？我尝试使用$（“#”）.mouseweel函数，但它似乎没有滚动（尽管它在使用警报测试时确实触发了事件）
  将css更改为此

      #wrap
  {
  width:100%;
  height:500px;
  background-color: rgba(0,0,0,0.5);
  overflow:scroll;
  overflow-y:hidden;
  }
  
  #newswrap
  {
  width:2500px;
  height:500px;
  text-align: center;
  }
  
  
  .post
  {
  width: 300px;
  /* display:inline-block; */
  background: rgba(0,0,120,0.5);
  padding: 10px;
  margin: 30px 0px 30px 30px; 
  }
  

  ---

  这应该可以做到，清除由display:inline块引起的额外间隔，然后确保消除html中每个.post之间的空白。
  使用CSS3功能，您可以使用columns（）并使用

  column break-inside:avoid以将其保留在块中。（这些CSS属性需要特定于浏览器的定义。）但这在较旧的浏览器中不起作用。
  然后所有内容都垂直对齐，尝试向HTML添加更多的.post，您会看到它。尝试添加垂直对齐：中间，而不是内联块，将其更改为表格单元格可能会起作用。请在caniuse.com上查看功能支持列表浏览器
      #wrap
  {
  width:100%;
  height:500px;
  background-color: rgba(0,0,0,0.5);
  overflow:scroll;
  overflow-y:hidden;
  }
  
  #newswrap
  {
  width:2500px;
  height:500px;
  text-align: center;
  }
  
  
  .post
  {
  width: 300px;
  /* display:inline-block; */
  background: rgba(0,0,120,0.5);
  padding: 10px;
  margin: 30px 0px 30px 30px; 
  }