css - CSS - 画像の配置

Question

テーブルを使用せずにこれを行うことはできますか、それともテーブルが最善の解決策ですか?

番号が付けられた各ボックスは、別の画像です。

   ___________________
   |       |    2    |
   |       |_________|
   |   1   |  3 |  4 |
   |       |____|____|
   |       |    5    |
   |_______|_________|

Answer 1

コンテナーの幅が定義されている限り、フロートを使用してこれを行うことができます。したがって、例は次のようになります。

<div class="container">
  <img src="img1.jpg" />
  <img src="img2.jpg" />
  <img src="img3.jpg" />
  <img src="img4.jpg" />
  <img src="img5.jpg" />
</div>
<div class="clear"></div>

そしてあなたのcssは次のようになります：

.container {
  width: 600px;
}

img {
  float: left;
}

.clear {
  clear: both;
}

画像が適切な幅と高さで構築されている限り、それでうまくいくはずです。