javascript - CSS / jQuery 改进的页面流

Question

我想让我的网页更流畅，但我不知道我在搜索它叫什么！

假设我有以下 HTML：

<section>
  <article>
    <h1>Article Header</h1>
    <p>Article content</p>
  </article>
  <article>
    <h1>Article Header</h1>
    <p>Article content</p>
    <p>More content</p>
  </article>
  <article>
    <h1>Article Header</h1>
    <p>Article content</p>
    <p>More content</p>
    <p>More content</p>
  </article>
  <article>
    <h1>Article Header</h1>
    <p>Article content</p>
    <p>More content</p>
    <p>More content</p>
    <p>More content</p>
  </article>
  <article>
    <h1>Article Header</h1>
    <p>Article content</p>
    <p>More content</p>
    <p>More content</p>
  </article>
  <article>
    <h1>Article Header</h1>
    <p>Article content</p>
    <p>More content</p>
  </article>

和以下CSS

section article {
  width: 49%;
  display: inline-block;
}

这使得文章在该部分中并排显示，但文章大小不同时存在间隙。

我将如何使它流动，以便没有间隙（即填充可用空间）？

如果需要，我对使用 jQuery / JavaScript 的解决方案持开放态度。

小提琴补充说：

http://jsfiddle.net/Yn4et/

Answer 1

我不确定我是否正确理解您想要的内容，但我认为这是以下问题的重复：

如何使用 CSS 创建网格/平铺视图？

Answer 2

section {
   width: 100%;
}

article {
  width: 50%;
  display: inline-block;
  margin: 0;
  padding:0;
}