4格内嵌图像，这是possilbe？

Question

所以我是一个小混混关于我会如何去呢？

我期待着安排4张图片。 2在顶部内联，一个在这些图像下方，一个在两个垂直方向。

有人能帮助我实现这一点 - here is a link to an example

Answer 1

假设图像都是100像素宽，较小的图像是50像素高大，高大的一个是120像素高，而宽一个是220px宽，间距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/

随意与尺寸一起玩，以配合你想要做的事。