ひとつの記事が、こんな感じだとして、
<div class="unit"> <h3>タイトル</h3> <div class="contents"> <p> 記事。<br> ああああああああ... </p> </div> </div>
スタイルが、こんな感じ。
H3 { border: 1px solid black; margin: 6px 3px; } .unit { width: 20em; /* ここは、お好みの幅で */ float: left; border: 1px solid black; padding: 0; } .contents { border: 1px solid black; margin: 6px 3px; }
これだと、ウィンドウの幅で、次の行に移る感じです。
決まった数でずらしたいなら、例えば、こんなのを追加。
.unit:nth-child(3n+2) { clear: both; }
JSFiddle でやってみたのが、これです。
http://jsfiddle.net/jjz2wb35/1/embedded/result/
ソースは、右上の「Edit in JSFiddle」をクリックすると、見られます。
4ブロック全体をdivタグで、各々のブロックをolタグ、タイトルと文を各々liタグでくくればできそうですね。