javascript - How do you float elements without a vertical gap?

Question

I am trying to float elements left. Here is my css:

width: 320px;
float: left;
border: 1px solid #ccc;
margin-top: 10px;
margin-right: 10px;
border-radius: 5px;

My Generated Output

But i want to show my div in this format like

Please help me out. How do I prevent the vertical gap using CSS?

Answer 1

If there will always be two columns and the content is always in the left or right column, you can use float right on the 2nd column and that would resolve the issue.

.container > .content-box:nth-child(odd) {float:left}
.container > .content-box:nth-child(even) {float:right}

In the future, CSS Flexbox will resolve this issue; however, it isn't well supported as of yet.