How to arrange images like this? - css

Question

I'm trying to arrange images like the picture below? I'm already try float left, but it didn't display as picture below.

Answer 1

CSS can't do it, you need JavaScript.
Specifically jQuery, and then jQuery Masonry.
Alternatively, if you'd prefer to stick to raw JavaScript, you can use Vanilla Masonry.
Take a look at the images demo: http://masonry.desandro.com/demos/images.html

Answer 2

Pure CSS, tested in Internet Explorer, Fire Fox, and Opera:
<style type="text/css">
/*<![CDATA[*/
.A {
float: left;
margin: 0px 6px 0px 0px;
}
.A1 {
border: 1px solid black;
float: left;
width: 100px;
height: 74px;
margin: 0px 0px 6px 0px;
}
.A2 {
border: 1px solid black;
float: left;
width: 100px;
height: 83px;
clear: left;
}
.B {
float: left;
margin: 0px 6px 0px 0px;
}
.B1 {
border: 1px solid black;
float: left;
width: 100px;
height: 47px;
margin: 0px 0px 6px 0px;
}
.B2 {
border: 1px solid black;
float: left;
width: 100px;
height: 126px;
clear: left;
}
.C {
float: left;
margin: 0px 6px 0px 0px;
}
.C1 {
border: 1px solid black;
float: left;
width: 100px;
height: 107px;
margin: 0px 0px 6px 0px;
}
.C2 {
border: 1px solid black;
float: left;
width: 100px;
height: 49px;
clear: left;
}
.D {
float: left;
margin: 0px 6px 0px 0px;
}
.D1 {
border: 1px solid black;
float: left;
width: 316px;
height: 60px;
margin: 0px 0px 6px 0px;
}
.D2 {
}
.D2A {
border: 1px solid black;
float: left;
width: 100px;
height: 86px;
clear: left;
margin: 0px 6px 6px 0px;
}
.D2B {
border: 1px solid black;
float: left;
width: 100px;
height: 116px;
margin: 0px 6px 6px 0px;
}
.D2C {
border: 1px solid black;
float: left;
width: 100px;
height: 131px;
margin: 0px 0px 6px 0px;
}
.E {
border: 1px solid black;
float: left;
width: 100px;
height: 202px;
}
/*]]>*/
</style>
<div class="A">
<div class="A1">
A1
</div>
<div class="A2">
A2
</div>
</div>
<div class="B">
<div class="B1">
B1
</div>
<div class="B2">
B2
</div>
</div>
<div class="C">
<div class="C1">
C1
</div>
<div class="C2">
C2
</div>
</div>
<div class="D">
<div class="D1">
D1
</div>
<div class="D2">
<div class="D2A">
D2
</div>
<div class="D2B">
D3
</div>
<div class="D2C">
D4
</div>
</div>
</div>
<div class="E">
E
</div>