参考画像のようなホームページを作るにはどうしたら良いのでしょうか

立命館大学の教員紹介 http://www.ritsumei.ac.jp/lt/introduce/faculty/i … を参考にして、似たような人物紹介ページを作ろうとしています。
添付の画像は、作りたいと思っている箇所のスクショです。

参考ページのHTMLとCSSをコピペしてみたのですが、間違っているのか足りないのか上手くいきません。
似たようなものを作るにはどうしたらよいのでしょうか？
出来ればテーブルは使わずに、参考ページと同じくリストを使って。

まず、一人の人物あたりの塊の作り方もわかっていません。
そして、それを二列にするのも、やり方がわかりません。
順番は左上の次は右上、その次は一段下がって左、右・・・・・・と続けたいです。

ちなみにですが、私は10年くらい前に勉強したHTMLの基礎の基礎位の知識しかなくCSSは詳しくありません。
自分で構築するには知識が足りず、ネットで調べて拾っては編集して作っています。
会社では既存のページの更新作業だけだったので良かったのですが、一部リニューアルすることとなって新しいページも作ることになって困ってしまいました。
なので、初心者でもわかりやすくご説明頂けると幸いです。

あまり時間が無いので、至急のご回答宜しくお願い致します。

質問者からの補足コメント

• ご回答ありがとうございます。
  別の質問サイトで解決いたしました。
  
  HP制作が私の主な仕事ではありません。
  更新だけのはずが急に新しくすると言われ、さらに作り始めてから、2ヶ月後の退職が決まり、回答者様が仰る2ヶ月ですら時間がありません。
  他社に依頼するお金もありません。
  なので突貫工事でも形になれば構わない状況なのです。
  
  結局、tableを使用しfloatで回り込ませて二列にする方法を取りました。
  
  基礎を学んでいても知らないことばかりで、何が出来て出来ないのかもわからない状態です。
  勉強不足と言われようが、会社が参考書を買ってくれるわけでもありません。
  今後Web制作をやっていくわけではないので、自費で購入するお金は勿体ないです。
  なので、ネットじゃわからない事をこうして質問した事態なのです。
  
  ちなみにですが、私の本来の仕事はDTPです。
  
  そしてここで質問を締め切らせて頂きます。

  No.1の回答に寄せられた補足コメントです。 補足日時：2015/07/30 20:22

No.1 回答者： ORUKA1951 回答日時： 2015/07/30 19:54

どうも学び方を間違えてしまったような・・・。

正しく学べば余暇を使って2ヶ月もあればできるはずです。
　IT技術なんて、理科や数学と同じで基礎からきちんと学べば、とても簡単なものです。
　まずHTMLは、文書構造だけをマークアップする言語でそれ以外の目的はありません。なぜなら出自はSGMLだからです。HTMLの基礎の基礎ですから御存知だと思いますが。
→SGML#背景 - Wikipedia( https://ja.wikipedia.org/wiki/Standard_Generaliz … )
　10年前でしたら、HTML4.01が勧告(1999年)されて５年以上経過していますが、それ以来、『構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』が強く叫ばれていました。
　それをデザインするためのCSS1は当時からありましたし、CSS2は９年前の2008年、現在のCSS2.1の勧告は今から４年前の2011年7月ですから、理解されていないのかもしれませんね。
　現在、ウェブ標準は HTML4.01 + CSS2.1とされれていますから（HTMLがとても増えてきましたが・・）それを目標にされたらよいでしょう。

>自分で構築するには知識が足りず、ネットで調べて拾っては編集して作っています。
　これは最悪の学習方法です。理数科を問題と回答集だけで身につけよと言うものですよ。そうではなく、まず仕様書を読みそれにしたがって身につけていく。それが一番早く効率的で応用が利きます。
　私は　２５年前にこの世界に入りましたが、当時から仕様書を読み解くことから始めてきました。

　例えば、この場合のHTMLは、【人名と紹介記事ののリスト】ですから、率直に
<ul id="album">
　<li>山田太郎
　　<ol>
　　　<li><img src="" width="" height="" alt=""></li>
　　　<li>自己紹介</li>
　　　<li><a href="">山田太郎のページ</a></li>
　　</ol>
　</li>
・・・・で良いのですよ。
　あとはスタイルシートでデザインします。
幅広のディスプレイでは、4列に小さな画面だと２列、携帯電話だと１列、印刷だとシンプルなリスト形式とかが、自在に・・・

　あせってつまみ食いしても時間のロスですよ。