Come utilizzare un'immagine di sfondo per un div principale che ha due div, uno a sinistra e uno a destra
-
08-07-2019 - |
Domanda
Voglio creare una pagina HTML, CSS in cui il layout sia il seguente:
< div id = " content " >
< div id = " left " >
.....
lt &; / div gt &;
< div id = " right " >
.....
lt &; / div gt &;
lt &; / div gt &;
Il div del contenuto ha un'immagine di sfondo che dovrebbe essere ripetuta nella direzione y. Anche il div destro e sinistro dovrebbero essere affiancati sulla stessa immagine di sfondo. Sono in grado di realizzarlo mantenendo l'altezza del contenuto fissa ma non voglio fissarla in altezza. Per favore aiutatemi gente.
Grazie in anticipo :)
Soluzione
senza vedere il tuo codice ... suppongo che stai fluttuando i DIV sinistro e destro ... ma non stai fluttuando il contenuto DIV ...
il tuo CSS dovrebbe essere simile a questo per farlo funzionare:
#content {
float:left;
background-image:url('whatever.png');
background-repeat:repeat-y;
}
#left {
float:left;
}
#right {
float:left;
}
Altri suggerimenti
Sono in grado di realizzarlo ma entro mantenendo l'altezza del contenuto riparato ma non voglio fare il altezza del contenuto fissa.
Se riesci a ripetere l'immagine di sfondo nella direzione Y, non dovrebbe importare quanto sia alta la div #content
, poiché lo sfondo riempirà solo lo spazio rimanente, giusto?
Se il div del contenuto non si sta espandendo all'altezza del div del figlio, chiaramente float
deve essere al di fuori del normale flusso della pagina, nel qual caso dovresti <=> e non impostare un'altezza per il contenitore div.
È abbastanza difficile capire cosa stai cercando di fare, ma io penso ciò che vuoi fare è aggiungere overflow: auto
al tuo div contenuto, in modo che diventi la stessa altezza del div destro e sinistro:
#content {
overflow: auto;
background: [bg code]
}
#left, #right {
float: left;
}