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

Question

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

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

提前致谢。

Answer 1

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

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

查看相同图像尺寸的小提琴here。

您可以稍微修改一下，以便通过将每行包裹在自己的div中，然后设置每个行的高度来为图像使用变量高度：

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

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

.middle {
  height: 200px;
}

请参阅this fiddle了解变量高度。

<强>更新

还可以选择通过给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%
}

Fiddle demonstrating this

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

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

希望这有帮助！

Answer 2

以下是使用Flex-box

的其他选项

此解决方案可以容纳不同大小的图像

您可以阅读更多相关信息here

.wrapper {
  font-size: 150px;
  /* <-- adjust this to proportiantly scale everything */
  outline: 1px dotted red;
}
img {
  width: 1em;
}
.container,
.row-container {
  display: flex;
  width: 3em;
}
.container {
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
.row-container {
  justify-content: space-between;
  flex-direction: row;
}

<div class="wrapper">
  <div class="container">
    <div>
      <img src="http://placehold.it/100x150">
    </div>

    <div class="row-container">
      <div>
        <img src="http://placehold.it/150x120">
      </div>

      <div>
        <img src="http://placehold.it/170x110">
      </div>
    </div>

    <div>
      <img src="http://placehold.it/190x200">
    </div>
  </div>
</div>

这是一个表格解决方案 也可以使用不同大小和半径角的图像

td {text-align:center;vertical-align:center;}
td img {border-radius:4px;}

<table cellpadding="0" cellspacing="0">
  <tr>
    <td></td>
    <td><img src="http://placehold.it/310x120"></td>
    <td></td>
  </tr>
  <tr>
    <td><img src="http://placehold.it/175x110"></td>
    <td></td>
    <td><img src="http://placehold.it/300x150"></td>
  </tr>
  <tr>
    <td></td>
    <td><img src="http://placehold.it/280x100"></td>
    <td></td>
  </tr>
</table>