Yocker
  1. Yocker
  3. Crea una divisione di due righe in una griglia
Intereting Posts
Cos’è l’algoritmo per windows scorrevoli? Esempi? Utilizzo della query MySQL per attraversare le righe per creare un albero ricorsivo Ottieni l’object che appare più volte in un array DataTable to JSON Rimozione di NTLM da Eclipse UIActivityViewController per Facebook non mostra testo predefinito JPA Entity Manager dovrebbe essere chiuso? come mostrare le linee in comune (reverse diff)? Come fare una richiesta web autenticata in PowerShell? ruby 1.9: sequenza byte non valida in UTF-8 Come per ciascuna hashmap? Come posso ottenere peccato, cos e abbronzatura per usare gradi invece di radianti? leggere il file .msg con java mail api ..pls mi suggerisce Livello finestra trasparente che è click-through e rimane sempre in primo piano Come posso testare un object JavaScript vuoto?

Crea una divisione di due righe in una griglia

Ho una pagina piena di blocchi che si accumulano con il display: inline-block . Voglio fare quattro o due volte più grande, quindi ho usato il float: left o right per mettere altri blocchi in giro.

Il mio problema è che se ho una riga di cinque elementi , come posso inserire un elemento più grande nel mezzo ? (come float mette naturalmente sul lato).

Ecco uno snippet di esempio: 

 #wrapper{ width: 516px; } .block{ display: inline-block; width: 90px; height: 50px; margin: 5px; background-color: red; } .bigger{ height: 110px; }

Ecco cosa mi piacerebbe avere dal frammento sopra Previsto

    Hai fissato altezze sugli elementi figlio ( .block ). Sulla base di tali informazioni, possiamo estrapolare l’altezza del contenitore ( #wrapper ).

    Conoscendo l’altezza del contenitore, è ansible ottenere il layout utilizzando CSS Flexbox con flex-direction: column e flex-wrap: wrap .

    Un’altezza fissa sul contenitore funge da punto di interruzione, indicando gli elementi flessibili in cui avvolgere. 

     #wrapper { display: flex; flex-direction: column; flex-wrap: wrap; height: 120px; width: 516px; } .block { width: 90px; flex: 0 0 50px; margin: 5px; background-color: red; } .bigger { flex-basis: 110px; }

    Affinché il layout funzioni con Flexbox, è necessario utilizzare contenitori annidati o conoscere l’altezza del contenitore ( vedere la mia altra risposta in questa pagina ). Non così con Grid. La struttura del codice è molto semplice. 

     #wrapper { display: grid; /* 1 */ grid-template-columns: repeat(5, 90px); /* 2 */ grid-auto-rows: 50px; /* 3 */ grid-gap: 10px; /* 4 */ width: 516px; } .bigger { grid-row: 1 / 3; /* 5 */ grid-column: 2 / 3; /* 6 */ } .block { background-color: red; }