添付画像のようなホームページを作るにはどうしたら？

質問

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

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

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

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

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

回答No.1

qualheart · ベストアンサー

まず、教員のリスト全体をDIVで囲み、そのDIVに対して固定でwidthを指定します。
その上で、1人の教員の情報をさらにDIVタグで囲み、このDIVに対しても、widthとfloat:leftを設定します。

float:leftを言うのは、要素を左に寄せて配置するCSSです。
float:leftで要素を配置すると、左から要素を並べて表示します。その際、1行に入り切らなくなった要素は、下に下がりまた左から表示するようになります。

つまり上記のfloat:leftの性質を利用して、全体のDIVのwidthを固定で指定し、更に教員のDIVのwidthを全体のwidthに丁度２つ収まる数値で指定すれば、1行に２つずつ教員のブロックを表示する形でページ内に配置することができる訳です。

もっと詳しく知りたければfloat:leftで検索すれば、色々と調べられると思います。

ご参考まで。

お礼

float:leftをcssに組み込んでみたところ、上手くいきました！
ありがとうございます