Q19 下のような配置を作る - HTML5, jQuery役立つ情報ブログ

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Q19</title>
<link rel="stylesheet" href="css/style.css">
</head>

<body>
<div id="wrapper">
<div class="cap">
<p><img src="img/01.jpg" width="148px" height="148px"></p>
<p>画像のキャプチャ１</p>
</div>
<div class="cap">
<p><img src="img/01.jpg" width="148px" height="148px"></p>
<p>画像のキャプチャ2</p>
</div>
<div class="cap">
<p><img src="img/01.jpg" width="148px" height="148px"></p>
<p>画像のキャプチャ3</p>
</div>
<div class="cap">
<p><img src="img/01.jpg" width="148px" height="148px"></p>
<p>画像のキャプチャ4</p>
</div>
<div class="cap">
<p><img src="img/01.jpg" width="148px" height="148px"></p>
<p>画像のキャプチャ5</p>
</div>
<div class="cap">
<p><img src="img/01.jpg" width="148px" height="148px"></p>
<p>画像のキャプチャ6</p>
</div>
<div class="cap">
<p><img src="img/01.jpg" width="148px" height="148px"></p>
<p>画像のキャプチャ7</p>
</div>
<div class="cap">
<p><img src="img/01.jpg" width="148px" height="148px"></p>
<p>画像のキャプチャ8</p>
</div>
</div>
</body>
</html>



@charset="UTF-8";

/*reset*/
body, p {
  margin: 0;
  padding: 0;
}

#wrapper {
  width: 540px;
  margin: 0 auto;
}
.cap {
  float: left;
  width: 160px;
  border: 1px solid gray;
  margin: 5px;
}
p {
  text-align: center;
  margin: 3px;
}

尚、画像はすべて同じものを使ったので、01.jpgになっています。