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;
}

只要您的图像以适当的宽度和高度构建，那么就可以解决问题。