html - 均等なスペースの画像？

Question

画面の幅に応じて、4つの画像を連続して配置したいと思います。水平方向のオーバーフローなしに、画像間に適切な間隔を空けることができるように、これを実行したいと思います。

Answer 1

次のレイアウトでは、画像の幅が同じであると想定して、必要に応じて画像を配置します。

<div>
<div style="width: 25%; text-align: center;"><img src="img1.jpg"></div>
<div style="width: 25%; text-align: center;"><img src="img2.jpg"></div>
<div style="width: 25%; text-align: center;"><img src="img3.jpg"></div>
<div style="width: 25%; text-align: center;"><img src="img4.jpg"></div>
</div>

落とし穴があります。最初の画像の前と最後の画像の後のギャップは、その間のギャップと比較して半分になります。

 |  +----+    +----+    +----+    +----+  |
 |--|    |----|    |----|    |----|    |--|
 |  +----+    +----+    +----+    +----+  |

Answer 2

これにはテーブルを使用します。

<table width="100%">
 <tr>
  <td width="25%">IMAGE</td>
  <td width="25%">IMAGE</td>
  <td width="25%">IMAGE</td>
  <td width="25%">IMAGE</td>
 </tr>
<table>

その後、必要に応じて追加cellpaddingしcellspacingます