Perché il colore di sfondo non mostrano come il nero? Non riesco a impostare la larghezza e galleggiare, è possibile senza di loro?CSS background-color non ha alcun effetto su un DIV
Grazie per il vostro tempo.
Poiché il div esterno contiene solo div flottati, restituisce 0 altezza. O dargli un'altezza o impostare il suo overflow su nascosto.
il trucco dell'altezza lo ha fatto. Grazie mille! :) :) –
Puoi spiegare perché funziona? Mi chiedo. –
modificarla in:
<div style="background-color:black; overflow:hidden;" onmouseover="this.bgColor='white'">
<div style="float:left">hello</div>
<div style="float:right">world</div>
</div>
Fondamentalmente il div esterno contiene solo carri allegorici. I galleggianti vengono rimossi dal flusso normale. In quanto tale, il div esterno non contiene veramente nulla e quindi non ha altezza. È davvero nero ma non riesci a vederlo.
L'overflow: la proprietà nascosta rende fondamentalmente il div esterno racchiude i float. L'altro modo per farlo è:
<div style="background-color:black" onmouseover="this.bgColor='white'">
<div style="float:left">hello</div>
<div style="float:right">world</div>
<div style="clear:both></div>
</div>
Oh, e solo per completezza, si dovrebbe davvero preferisce le classi di stili CSS dirigere.
Mentre la risposta di lobstrosity è eccellente, questa è una soluzione migliore. Non devi dichiarare esplicitamente l'altezza (potresti non saperlo). Mi piace anche usare
. –
@cletus e cosa dovremmo fare nel caso in cui avessimo div interni dinamici e non abbiamo la possibilità di farli fluttuare, – Dragon
Senza carri (e non necessari div):
<div style="background-color:black;" onmouseover="this.bgColor='white'">
hello world
</div>
Se si utilizza carri, è necessario galleggiare il div esterno e specificare larghezze.
I galleggianti non hanno un'altezza tale che il div di contenimento abbia un'altezza pari a zero.
<div style="background-color:black; overflow:hidden;zoom:1" onmouseover="this.bgColor='white'">
<div style="float:left">hello</div>
<div style="float:right">world</div>
</div>
overflow: hidden cancella il float per la maggior parte dei browser.
zoom: 1 cancella il galleggiante per IE.
Questa è una domanda molto vecchia, ma vale la pena aggiungere che ho appena avuto un problema simile in cui un colore di sfondo su un elemento footer nel mio caso non ha mostrato. Ho aggiunto un position: relative che ha funzionato.
ha cambiato il tuo titolo in qualcosa di un po 'più informativo. Altri potrebbero avere lo stesso problema in futuro, quindi rendere più facile per loro trovare la tua domanda :) – jalf
Non riesco a capire cosa nel * diamine * le risposte stiano andando via in questa domanda. – jpmc26