Problema con float: alcuni div non vengono allineati
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
Codice HTML:
<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𝕠t 𝑆𝑢𝑛𝑠ℎ𝑖𝑛𝑒
</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>
𝖉𝖊𝖘𝖎𝖗𝖊
</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 𝑆𝑢𝑛𝑠ℎ𝑖𝑛𝑒
</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 𝓤𝔃𝓲 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 𝓁𝒾ℊ𝒽𝓉𝓈
</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>
▷ƝՕ𝖶 𝒫𝓁𝒶𝓎𝒾𝓃𝑔
</div>
</div>
</div>
</div>
E questi sono i CSS:
Codice:
#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!
