Html 4个div内联图像，这可能吗？

所以我有点困惑我该怎么做

我期待安排4个图像。2个在顶部内联，一个在这些图像下面，另一个垂直放置在两个图像上

---

有人能帮我做到这一点吗？

假设所有图像都是100px宽，较小的图像是50px高，高的图像是120px高，宽的图像是220px宽，它们之间的间距是20px，你会得到以下HTML：

<div id="ImagesOuter">
  <div id="Image1"><img src="..." width="100" height="50" alt="" /></div>
  <div id="Image2"><img src="..." width="100" height="50" alt="" /></div>
  <div id="Image3"><img src="..." width="100" height="120" alt="" /></div>
  <div id="Image4"><img src="..." width="220" height="50" alt="" /></div>
</div>

一把小提琴用简单的灰色方框显示：

您可以随意调整尺寸，以匹配您尝试执行的操作

#ImagesOuter {
  /* Combined Width */
  width: 340px;
  /* Resize according to float content */
  overflow: hidden;
}
/* IE7-8 support for float clear-fix */
*+html #ImagesOuter {
  min-height: 1%;
}

/* Proper rendering */
#ImagesOuter > div > img {
  display: block;
}

#Image1 {
  float: left;
  margin: 0 20px 20px 0;
}

#Image2 {
  float: left;
  margin: 0 20px 20px 0;
}

#Image3 {
  float: right;
}

#Image4 {
  clear: left;
  float: left;
}