html - 4 divインライン画像、これは可能ですか？

Question

だから私はこれについてどうやって行くのか少し混乱していますか？

4枚の画像をアレンジしたいと思っています。2つはインラインの上部にあり、1つはこれらの画像の下にあり、もう1つは両方に垂直に配置されています。

誰かが私がこれを達成するのを手伝ってくれるでしょうか-ここに例へのリンクがあります

Answer 1

画像の幅がすべて100ピクセル、小さい画像の高さが50ピクセル、背の高い画像の高さが120ピクセル、幅の広い画像の幅が220ピクセル、間隔が20ピクセルであるとすると、次の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/

やろうとしていることに合わせて、寸法を自由に試してみてください。