Question

所以我对如何解决这个问题感到有些困惑？

我希望安排4张图片。 2在顶部内联，一个在这些图像下方，另一个在垂直方向上。

有人可以帮助我实现这一目标 - here is a link to an example

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/

随意使用尺寸来匹配您正在尝试的尺寸。

4 div内嵌图像，这可能吗？

1 个答案: