Due div sono uno accanto all'altro, entrambi a sinistra all'interno di un wrapper. In IE e Firefox vengono visualizzati correttamente, ma in Chrome, il secondo div flottante viene cancellato sotto Div A. Quando rimuovo "float: left" nel css, passa alla posizione corretta in Chrome, ma cancella in IE e firefox (come dovrebbe). Non so perché appare in questo modo in Chrome. Qualche idea?Il secondo div flottante in chrome scompare prima del primo div
L'HTML e il CSS sarebbero utili per rispondere a questo.
Se hai solo due div e vuoi che galleggiano l'uno accanto all'altro, quindi imposta una larghezza su ciascuno di essi e fluttua a sinistra e fluttua nell'altro a destra. Ricorda di lasciare uno spazio tra i due.
questo è tutto. Ho completamente dimenticato di aggiungere una larghezza per div B. Grazie a te e tutti gli altri consigli –
Sono sempre le cose stupide che ci ottengono;) –
Senza un esempio di codice Questo in realtà è solo indovinare
io non sono sicuro di come funziona Chrome, ma so annunci di IE propri stili. Hai usato un reset css? la maggior parte dei problemi del browser incrociato può essere risolta da questo.
Suoni come la larghezza combinata di 2 div floating supera la larghezza del wrapper. Prova a impostare la larghezza del wrapper su 100% o nessuna larghezza ... o riducendo la larghezza dei due div flottanti.
avete una visualizzazione: inline, blocco ecc. Le proprietà di stile impostate su una di queste div?
ugh @ "IE pubblicizza i propri stili" ... alcuni browser potrebbero differire in base all'impostazione predefinita stili, tranne in modalità rigorosa, ma nessuno di essi aggiunge i propri stili. –
stili predefiniti è ciò che intendevo..Sono corretto corretti – Dan
Che ne è del display di impostazione: blocco in linea e larghezza per entrambi i div?
MODIFICA: l'impostazione di una larghezza massima di% 50 per ognuno funzionerebbe in tutti i browser eccetto IE6, supponendo che non ci sia padding/margine impostato.
questo potrebbe funzionare ... è inline-block supportato da tutti i browser però? – Dan
funziona per me in IE7/IE8 e so che Chrome lo supporta. Se non funziona in IE6, non dovrebbe comunque fare la differenza. –
Ho affrontato lo stesso problema. Chrome visualizza in modo errato i div con float. Il blocco viene visualizzato sotto il primo. Non a parte come mi aspettavo. La solitudine è semplice! Surround entrambi i blocchi con div che nessun altro blocco di sorella all'interno di.
Ho avuto un problema in cui avevo un contenitore div con un gruppo di div interne con il float: set di proprietà left. Anche il mio ultimo interiore (più a destra) si è concluso. Ho risolto il problema assicurandomi che i div interni combinati con i margini non eccedessero la larghezza del contenitore div.
Lo strumento di sviluppo di Chrome simile a firebug è stato eccezionale nell'aiutarmi a risolvere il problema. Per la mia div contenitore non ho impostato esplicitamente una larghezza ma lo strumento di sviluppo di Chrome potrebbe mostrarmi la larghezza ereditata. Poi ho guardato tutte le larghezze delle div interne combinate e poi ho regolato una parte della larghezza del div interno.
Ho avuto più css float left div con collegamenti di testo all'interno e il contenitore era sopra lappatura sulla destra di ciascuno. La correzione era di rimuovere lo spazio nel testo di visualizzazione del collegamento. per esempio. ...> TEXT </a> a ...>TEXT</a>
anche un problema simile con div di figlio flottante. Nel mio caso .. Stavo fluttuando un div circostante a destra, che conteneva l'elemento h3 (con proprietà text-align) - seguito da 2 elementi block figlio.
intenti del centro del testo h3, in relazione a elementi di blocco bambino sotto di essa.
-
problema? Non avevo un set larghezza per elementi figlio di blocco .. Perché? Volevo che la larghezza mantenga una spaziatura distinta a sinistra/a destra rispetto alla quantità di testo in quel contenitore. per esempio. padding: 10px 30px;
Soluzione ho fatto ricorso a impostare una larghezza di circostante e div bambino, centro di testo anche allineamento sul div bambino per dare risultati simili di primo tentativo caso.
Ho riscontrato lo stesso problema. Ho avuto due div con float: lasciato all'interno di una tabella td - ho dovuto impostare lo stile di tabella td per includere style = "text-align: left;" per loro di allineare correttamente.
Devi dare 1 div l'altezza
Per esempio
Div 1
.oneColFixCtrHdr #mainContent {
background: #FFFFFF;
width: 375px;
height: 0px; /* deze hoogte op 0 instellen, die bepaal je met de onderstaande div. */
position: relative;
display: block;
float: left;
padding-left: 10px;
margin-bottom: 20px;
padding-bottom: 0px;
padding-top: 20px;
}
Div 2
.oneColFixCtrHdr #maincontent2 {
background: #FFFFFF;
width: 390px;
height: auto;
position: relative;
display: inline-block;
float: right;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 5px;
padding-bottom: 0px;
padding-top: 20px;
padding-left: 20px;
border-left-style: groove;
hi @wouter per rendere leggibile il css su StackOverflow è possibile utilizzare il pulsante {} (codice) nell'editor. In questo modo otterrai blocchi di codice formattati e colorati. – Apqu
Ho stesso problema in Chrome e mi risolverlo dando display:inline-table al genitore
In Chrome - Sembra che questo problema abbia a che fare con l'attributo dell'attributo padre. Ho avuto lo stesso problema e ho fatto molta ricerca. Finalmente l'ho risolto rimuovendo lo display attributo CSS del tag TD principale. Ho anche ossessionato una cosa sbiadita. Quando avevo display: block; per genitore un elemento tabella TD, in Chrome, colspan non funzionava (in IE funzionava correttamente). Ho graffiato i miei molti peli trovando questo problema.
Non sono un eroe dell'HTML, quindi nel mio caso il problema era davvero sciocco.
E 'stato solo un errore di sintassi modo da essere sicuri di controllare tutta la sintassi prima di iniziare a tirare i capelli come ho fatto io.
E SAFARI lo ignorava completamente e visualizzava correttamente i div in modo che mi fossi davvero confuso.
fondo era un tag non chiusa div che stava creando il problema:
<div class="seperator" </div> instead of <div class="seperator"> </div>
hmm, sto solo leggendo la domanda originale e sto cercando di capire dove hai trovato quel DIV "rotto" ??? Fondamentalmente, è una domanda di posizionamento CSS e non vedo come la tua risposta aiuti a risolvere questo specifico problema. – Wh1T3h4Ck5
La soluzione è semplice - basta aggiungere il div che contiene tutti questi div un attributo: display: table; - si dovrebbe risolvere il problema .
nel mio caso io uso display:inline-table per l'elemento padre degli elementi flottati .. Anche se non è una tabella.
ho usato il display:inline-table al fine di risolvere il bug che Google Chrome aveva incontrato ..
Ho affrontato lo stesso problema con Div e la sua Span bambini avevano entrambe float a destra, per risolvere ho solo aggiunto di visualizzazione in linea al Div genitore e ora funziona bene in Chrome e Safari entrambi.
Ho avvolto tutto in <div style="display:inline;"> ... code .. </div> e ho risolto il problema.
Questo è ciò che ha funzionato per me senza dover aggiungere stili o elementi stupidi al mio markup. –
Possiamo vedere qualche css/html? –