ho un genitore div, che può cambiare la sua dimensione, a seconda dello spazio disponibile. All'interno di quel div, ho flottante div. Ora, mi piacerebbe avere spaziatura tra questi div, ma non c'è spazio per il div genitore (vedi disegno).Come inserire la spaziatura tra i floating flottanti?
C'è un modo per fare questo con i CSS?
Grazie
ho trovato una soluzione, che almeno aiuta nella mia situazione, probabilmente non è adatto per altre situazioni:
Io do tutto il mio bambino verde div un margine completo:
margin: 10px;
E per la circonda div genitore giallo ho impostato un margine negativo:
margin: -10px;
ho dovuto anche a rimuovere qualsiasi larghezza o l'altezza esplicita impostazione per il div genitore giallo, altrimenti lo ha fatto n lavoro.
In questo modo, in assoluto, i div del bambino sono allineati correttamente, anche se il div giallo del genitore è ovviamente messo fuori gioco, che nel mio caso è OK, perché non sarà visibile.
Aggiungi margin al vostro stile div
margin:0 10px 10px 0;
ma che mette un margine anche in fondo, significa spazio tra i div verdi inferiori e il bordo inferiore del div giallo. Non voglio quello – ghost23
Siamo spiacenti. Stavo seguendo il tuo testo e non ho ricontrollato il tuo diagramma. Non penso che ci sia una pura soluzione CSS per questo - certamente non un buon cross browser. Vorrei usare JavaSCript per capire quali div sono sulla seconda riga, assegnare loro una classe e dare a quella classe 'margin-bottom: 0'. Non penso che tu possa andare molto meglio. – Jeff
questo aggiungerà il margine inferiore a tutti i div e creerà lo spazio con il div principale che non è richiesto in questa domanda. – punit
Non è solo un caso di applicazione di una classe appropriato per ogni div?
Ad esempio:
.firstRowDiv { margin:0px 10px 10px 0px; }
.secondRowDiv { margin:0px 10px 0px 0px; }
Questo dipende se si sa in anticipo quali div applicare quale classe.
ciao, sì, beh, come ho provato a dire, i div sono fluttuanti e il genitore div può cambiare le sue dimensioni, quindi non posso sapere, dove ogni div sarà. – ghost23
Ci scusiamo per rispondere a un vecchio post, ma è possibile effettuare le seguenti operazioni:
Assumendo che il contenitore div ha una classe "giallo".
.yellow div {
// Apply margin to every child in this container
margin: 10px;
}
.yellow div:first-child, .yellow div:nth-child(3n+1) {
// Remove the margin on the left side on the very first and then every fourth element (for example)
margin-left: 0;
}
.yellow div:last-child {
// Remove the right side margin on the last element
margin-right: 0;
}
Il numero 3n + 1 è uguale a ogni quarto elemento emesso e chiaramente funziona solo se si sa quanti saranno visualizzati in una fila, ma dovrebbe illustrare l'esempio. More details regarding nth-child here.
Nota: Per: primo figlio a lavorare in IE8 e precedenti, è necessario dichiarare <!DOCTYPE>.
Nota2: Il selettore nth-child() è supportato in tutti i principali browser, ad eccezione di IE8 e precedenti.
Ciao, grazie per la risposta, ma come ho detto nella mia domanda, il contenitore può cambiare le sue dimensioni, quindi potrebbe esserci spazio per più di tre div in una fila. – ghost23
Sono in ritardo per la festa ma ... ho avuto una situazione simile e ho scoperto padding-right (e in basso, in alto, a sinistra, ovviamente). Dal modo in cui capisco la sua definizione, mette un'area all'interno dello all'interno dello div quindi non c'è bisogno di aggiungere un margine negativo sul genitore come hai fatto con un margine.
padding-right: 10px;
Questo ha fatto il trucco per me!
Poiché questo padding è all'interno del div, avrà il colore di sfondo del div. In questo caso, sarebbe 10px di verde sul bordo destro del div verde. Ad esempio, se il div verde contiene del testo, assicurerà che non ci sia testo in quel 10px - ma non renderà quell'area gialla. Pertanto non utile nella situazione dell'OP. Ma buono per le persone da sapere. – ToolmakerSteve
Una risposta tarda.
Se si desidera utilizzare una griglia come questa, è necessario dare un'occhiata a Bootstrap, È relativamente facile da installare e offre esattamente ciò che si sta cercando, il tutto racchiuso in un semplice e semplice html/css + funziona facilmente per rendere i siti Web reattivi.
Fai un esempio! Solo "usare Bootstrap" non mi aiuta affatto. In realtà io * sto * usando Bootstrap e ho questa domanda. –
C'è solo uno svantaggio di questo approccio: se il tuo genitore si siede a filo con il lato destro della pagina (o entro 10px di esso), il 10px del margine negativo si sovrapporrà al bordo della finestra, allargando la pagina e causando un barra di scorrimento orizzontale. Questo può essere più un problema con la progettazione reattiva in cui è necessario iniziare a trattare con larghezze viewport che sono talvolta strette come 320px in totale. – thomasrutter
Nota: detto questo, non ho certamente trovato una soluzione migliore. – thomasrutter
Sì, hai ragione. Come ho detto, non è certamente applicabile in tutte le situazioni. – ghost23