Visualizzazione risultati 1 fino 5 di 5

Discussione: Problema con float: alcuni div non vengono allineati

  1. #1
    pup
    pup non è connesso Neofita
    Data registrazione
    28-01-2020
    Messaggi
    18

    Predefinito 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&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:
    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!
    Ultima modifica di pup : 05-07-2021 alle ore 20.10.45

  2. #2
    L'avatar di alemoppo
    alemoppo non è connesso Staff AV
    Data registrazione
    24-08-2008
    Residenza
    PU / BO
    Messaggi
    22,067

    Predefinito

    Ti consiglierei più semplicemente di utilizzare flexbox.

    Ciao!

  3. #3
    pup
    pup non è connesso Neofita
    Data registrazione
    28-01-2020
    Messaggi
    18

    Predefinito

    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!

  4. #4
    L'avatar di alemoppo
    alemoppo non è connesso Staff AV
    Data registrazione
    24-08-2008
    Residenza
    PU / BO
    Messaggi
    22,067

    Predefinito

    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!
    Ultima modifica di alemoppo : 28-07-2021 alle ore 19.18.22

  5. #5
    pup
    pup non è connesso Neofita
    Data registrazione
    28-01-2020
    Messaggi
    18

    Predefinito

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

Tags for this Thread

Regole di scrittura

  • Non puoi creare nuove discussioni
  • Non puoi rispondere ai messaggi
  • Non puoi inserire allegati.
  • Non puoi modificare i tuoi messaggi
  •