Q:

piled image float:left doesnt work html css

How do I get an ìmg arrangement like this in css?
---   ---  ---
| |   | |  | |
| |   ---  | |
| |   | |  ---
| |   | |  | |
---   | |  | |
| |   ---  | |    
| |   | |  ---
---   | |
| |   ---
| |
| |
---

I dont get it with float:left neither display:inline-block

A:

You can try using Flexbox and then set the flex-flow: column wrap;
Please see the code below

.container{
  
  height:100px;
  width:120px;
  display:flex;
  flex-flow: column wrap;
}

.container div{
  box-sizing: border-box;
  width: calc(90% / 3);
  margin-bottom: 3px;
}

.item1{
  height: 30px;
  background:purple;
}

.item2{
  height: 30px;
  background:gray;
}

.item3{
  height: 30px;
  background:orange;
}

.item4{
  height: 50px;
  background:yellow;
}

.item5{
  height: 40px;
  background:blue;
}

.item6{
  height: 30px;
  background:green;
}

.item7{
  height: 60px;
  background:brown;
}
<div class="container">
  <div class="item1"></div>
  <div class="item2"></div>
  <div class="item3"></div>
  <div class="item4"></div>
  <div class="item5"></div>
  <div class="item6"></div>
  <div class="item7"></div>
</div>

I also recommend that you use http://w3bits.com/flexbox-masonry/ to achieve what you wanted.

