0

Web ページのフローを改善したいのですが、探しているページの名前がわかりません。

次の 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/

4

2 に答える 2

1

あなたが何を望んでいるかを正しく理解しているかどうかはわかりませんが、これは次の質問と重複していると思います:

CSS でグリッド/タイル ビューを作成する方法

于 2012-05-12T16:49:42.500 に答える
0 
section {
   width: 100%;
}

article {
  width: 50%;
  display: inline-block;
  margin: 0;
  padding:0;
}
于 2012-05-12T16:39:28.763 に答える