CSS Floats & Collapsing White Space

Question

I have a page created by a database. It creates a DIV for each record (extremely simplified for the sake of the question). Each of these DIVs has a given width and floats to the left.

However, these DIVs do not have a given height, so sometimes the following happens, as shown in the figure. Is there a good way to prevent this, and is white space just “collapsing”?

Link to the site prototype. Here

Answer 1

I think this article will help you: http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/

Answer 2

, , clear: left; .

, , " " , Brynwood Pak N .

, "Brynwood Pak N Ship" , , " " , "- ".

clear: left , , "" . , ; "Brynwood Pak N Ship" "Postal Shoppe", . , , , .

Answer 3

clear: left div. display: inline-block , , ( , IE 6 ), , , .

Answer 4

. , !

Answer 5

, CSS. , "display: inline-block" . , , .

"", , . , , , , . , 1, 2. ( ) 2, , , 1.

- , CSS ( , ). , Javascript. , , Javascript CSS-, Javascript , .

, . , , , , , , .

Answer 6

, flex-direction count-count:

.parent {
    column-count: 2;
    column-gap: 1.25rem;
}
.child-class {
    flex-direction: column;
    display: inline-block;
    width: 100%;
}

, , css.