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?

```css
.wpr {
  padding: 20px;
}

.wpr span {
  width: 260px;
  min-height: 130px;
  background: green;
  float: left;
  margin: 10px;
}
```

```html
<div class="wpr">
  <span>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.
         </span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>
```

DEMO: <http://jsfiddle.net/zcvybdx3/>