html - 4 div 内联图像，这可能吗？

Question

所以我对我将如何处理这件事有点困惑？

我正在寻找安排4张图片。2 在顶部内联，一个在这些图像下方，一个在两个垂直位置。

有人可以帮我实现这一点 -这是一个示例的链接

Answer 1

假设图像都是 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>

这个CSS：

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

一个用简单的灰色框显示这个的小提琴：http: //jsfiddle.net/mcZRK/

随意调整尺寸以匹配您想要做的事情。