piled image float:left doesnt work html css

Question

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

---   ---  ---
| |   | |  | |
| |   ---  | |
| |   | |  ---
| |   | |  | |
---   | |  | |
| |   ---  | |    
| |   | |  ---
---   | |
| |   ---
| |
| |
---

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

thank you, I'm not using bootstrap in this project. How do I get it with plain css? — joe, Mar 13 '18 at 23:54
Try the `column` css https://www.w3schools.com/cssref/css3_pr_columns.asp More generally called masonry layout http://w3bits.com/css-masonry/ — A. L, Mar 14 '18 at 00:02
I got it. thank you!! feel free to publish a short answer to mark it — joe, Mar 14 '18 at 00:10

score 1 · Accepted Answer · answered Mar 14 '18 at 01:17

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.

Please see the browser support of flex-box in this link https://caniuse.com/#search=flex-box — davecar21, Mar 14 '18 at 22:19

piled image float:left doesnt work html css

1 Answers1