Problema con float: alcuni div non vengono allineati

[pup]

Ciao a tutti,

Sto creando un esempio di portfolio per dei filtri AR e ho allineato i vari filtri utilizzando float: left;.

Quando sono allineati in 2 righe e 4 colonne (sono 8 div in totale) funziona tutto correttamente, ma quando la pagina viene ristretta, e i div vanno a capo di conseguenza rimangono alcuni spazi dove dovrebbero esserci dei div vuoti.


Il link della pagina è https://pup.altervista.org/filters

<div align="center" id="all-video">
                <div class="video">
                    <div>
                        <video onmouseover="this.play()" onmouseout="this.pause();">
                            <source src="img/hot-sunshine-demo.mp4" type="video/mp4">
                        </video>
                    </div>
                    <div class="filter-desc">
                        <img class="filter-logo" src="img/hot-sunshine-logo.png">
                        <div>
                        	h&oopf;t &#x1d446;&#x1d462;&#x1d45b;&#x1d460;&planckh;&#x1d456;&#x1d45b;&#x1d452;
                    	</div>
                    </div>
                </div>
                <div class="video">
                    <div>
                        <video onmouseover="this.play()" onmouseout="this.pause();">
                            <source src="img/desire-demo.mp4" type="video/mp4">
                        </video>
                    </div>
                    <div class="filter-desc">
                        <img class="filter-logo" src="img/desire-logo.png">
                        <div>
                        	&#x1d589;&#x1d58a;&#x1d598;&#x1d58e;&#x1d597;&#x1d58a;
                        </div>
                    </div>
                </div>
                <div class="video">
                    <div>
                        <video onmouseover="this.play()" onmouseout="this.pause();">
                            <source src="img/the-world-chico-demo.mp4" type="video/mp4">
                        </video>
                    </div>
                    <div class="filter-desc">
                        <img class="filter-logo" src="img/the-world-chico-logo.png">
                        <div>
                        	the world, chico...
                        </div>
                    </div>
                </div>
                <div class="video">
                    <div>
                        <video onmouseover="this.play()" onmouseout="this.pause();">
                            <source src="img/tony-montana-colors-demo.mp4" type="video/mp4">
                        </video>
                    </div>
                    <div class="filter-desc">
                        <img class="filter-logo" src="img/tony-montana-colors-logo.png">
                        <div>
                        	Tony Montana Colors
                        </div>
                    </div>
                </div>
                <div class="video">
                    <div>
                        <video onmouseover="this.play()" onmouseout="this.pause();">
                            <source src="img/cool-sunshine-demo.mp4" type="video/mp4">
                        </video>
                    </div>
                    <div class="filter-desc">
                        <img class="filter-logo" src="img/cool-sunshine-logo.png">
                        <div>
                        	cool &#x1d446;&#x1d462;&#x1d45b;&#x1d460;&planckh;&#x1d456;&#x1d45b;&#x1d452;
                        </div>
                    </div>
                </div>
                <div class="video">
                    <div>
                        <video onmouseover="this.play()" onmouseout="this.pause();">
                            <source src="img/like-uzi-or-morty-demo.mp4" type="video/mp4">
                        </video>
                    </div>
                    <div class="filter-desc">
                        <img class="filter-logo" src="img/like-uzi-or-morty-logo.png">
                        <div>
                        	like &#x1d4e4;&#x1d503;&#x1d4f2; or Morty
                        </div>
                    </div>
                </div>
                <div class="video">
                    <div>
                        <video onmouseover="this.play()" onmouseout="this.pause();">
                            <source src="img/sunshine-lights-demo.mp4" type="video/mp4">
                        </video>
                    </div>
                    <div class="filter-desc">
                        <img class="filter-logo" src="img/sunshine-lights-logo.png">
                        <div>
                        	sunshine &lscr;&iscr;&gscr;&hscr;&tscr;&sscr;
                        </div>
                    </div>
                </div>
                <div class="video">
                    <div>
                        <video onmouseover="this.play()" onmouseout="this.pause();">
                            <source src="img/now-playing-demo2.mp4" type="video/mp4">
                        </video>
                    </div>
                    <div class="filter-desc">
                        <img class="filter-logo" src="img/now-playing-logo.png">
                        <div>
                        	&#x25b7;&#x19d;&#x555;&#x1d5b6; &Pscr;&lscr;&ascr;&yscr;&iscr;&nscr;&#x1d454;
                        </div>
                    </div>
                </div>
            </div>

E questi sono i CSS:

#all-video{
            	width: 90%;
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
            }
            .video{
                float: left;
                display: inline;
                width: 24%;
                min-width: 150px;
                height: auto;
                margin: 25px 3px 25px 3px;
                font-size: 100%;
            }
            video{
            	width: 100%;
            }
            .filter-desc{
            	text-align: left;
                position: relative;
            }
            .filter-desc > div{
            	top: 50%;
                position: absolute;
                left: 37px;
                transform: translateY(-50%);
            }
            .filter-logo{
                width: 32px;
                margin-right: 4px;
            }

Qualcuno sa come risolvere?
Grazie in anticipo!

[alemoppo]

Ti consiglierei più semplicemente di utilizzare flexbox.

Ciao!

[pup]

Ciao, grazie, a me servirebbe però che le proporzioni rimanessero invariate (essendo dei video) e con flexbox gli elementi interni si restringono.

Non conosci nessun altra soluzione, percaso?

Grazie per la risposta, ciao!

[alemoppo]

Se imposti una dimensione agli elementi interni, questi non dovrebbero restringersi. Hai una pagina di esempio dove hai provato?

Anche qui, essendo impostato width:100%, gli elementi interni vengono ridimensionati.

Ciao!

[pup]

Ok grazie mille
P.S. Scusa il ritardo :)