Yocker
  1. Yocker
  3. Crea una divisione di due righe in una griglia
Intereting Posts
Modifica del valore di un elemento in un elenco di strutture C ++, Free-Store vs Heap Spazi di lavoro di Eclipse: per cosa e perché? Matrice di lunghezza sconosciuta in MATLAB? Seleziona i dati dalla query MySQL “mostra tabelle” Condizione della query MongoDb sul confronto di 2 campi Come gestire le relazioni molti-a-molti in un’API RESTful? Perché ho bisogno di “OR NULL” in MySQL quando conto le righe con una condizione Come passare parametri al metodo ThreadStart in Thread? addEventListener per keydown su Canvas Che cos’è un algoritmo efficiente per trovare Area di rettangoli sovrapposti A cosa serve la parola chiave ‘override’ in C ++? Acquisizione audio con HTML5 Cos’è una convenzione di denominazione delle variabili ideale per le variabili del ciclo? Distinguere tra un singolo clic e un doppio clic in Java

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; }