在HTML中将4个图像对齐排列

我想要做的是让4个图像以十字形图案对齐.我正在考虑使用一张桌子,但我不想要角落,这将是空间与图像相同.如果图像是不同的尺寸,我希望能够使用不同尺寸的图像,而无需更改页面.我不知道如何处理这个问题.

下面是我想要做的粗略草图的图像.有一点是图像可能更高或更长.

提前致谢.

一种解决方案是创建div与图像占据相同高度的不可见元素,并将它们注入HTML中的正确位置:

div, img {
  float: left;
  width: 33%;
  height: 100px;
}

请在此处查看相同图像尺寸的小提琴.

你可以稍微修改它,通过将每行包装在自己的行中div,然后设置每个行的高度来为图像使用变量高度:

.top *, .middle *, .bottom * {
  float: left;
  width: 33%;
  height: 100%;
}

.top, .bottom {
  height: 100px;
}

.middle {
  height: 200px;
}

看到这个小提琴变高的高度.

更新:

还可以通过给div增加一个较小的宽度并为中间行的两个图像添加边距来更改中间行的"inset":

.middle div {
  width: 20%;
}

.middle img:nth-of-type(1) {
  margin-left: 6.5%
}

.middle img:nth-of-type(2) {
  margin-right: 6.5%
}

小提琴演示了这一点.

您可以随时使用不可见div和边距的宽度来获得所需的输出:)

请注意,我在这些示例中使用了高达99%的宽度.如果你愿意,你可以获得更具体的信息,但是你永远无法达到100%;)

希望这可以帮助!