Floated divs won't stack properly (without gaps)

Question

I have a container with many floated items. The problem is when the size of at least one of them changes, a gap occurs. Is there any way to force them to fill these gaps?

<

Answer 1

You can use flexbox to fill the gaps so that every row has the same height without gaps:

display: flex;
flex-flow: row wrap;

A working example:

.wpr {
  padding: 20px;
  display: flex;
  flex-flow: row wrap;
}

.wpr span {
  width: calc(50% - 20px);
  min-height: 130px;
  background: green;
  margin: 10px;
  display: block;
}

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pulvinar elit vitae lobortis tempor. Ut vitae quam maximus, iaculis lacus ut, volutpat lacus. Donec eget odio vel ligula ullamcorper hendrerit nec et arcu.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pulvinar elit vitae lobortis tempor. Ut vitae quam maximus, iaculis lacus ut, volutpat lacus.