Perché il blocco inline funziona in modo diverso quando viene eseguito l'overflow: nascosto viene applicato?

Volevo visualizzare due elementi <div> con larghezza e altezza affiancate. Ho applicato inline-block ai <div> s, ma la posizione dell'elemento di sinistra è strano:Perché il blocco inline funziona in modo diverso quando viene eseguito l'overflow: nascosto viene applicato?

vertical misalignment

HTML:

<body> 
    <div id="myDivTag">content</div> 
    <div id="map-canvas">for google map API</div> 
</body>

CSS:

#myDivTag, #map-canvas { 
    display: inline-block; 
    height: 95%; 
    width: 49%; 
    z-index: 0; 
}

L'unica differenza tra il due elementi è l'opzione overflow: hidden. Quando applico overflow: hidden a #myDivTag, funziona normalmente, ma non so perché. Penso che non abbia nulla a che fare con la proprietà overflow. Ma il mio pensiero è chiaramente sbagliato. Perché?

fonte

2016-01-11 김진우

Provare ad aggiungere 'vertical-algin: top;' a '#myDivTag, # map-canvas' potrebbe funzionare. – Anonymous

Perché? Perché 'overflow: hidden' crea un nuovo contesto di formattazione dei blocchi –

da scatole in linea di default in una linea sono allineati verticalmente dai loro linee di base (poiché il valore predefinito della proprietà vertical-align è baseline) e la la linea di base dei blocchi in linea dipende dal valore della proprietà overflow. Se il valore della proprietà overflow su un blocco in linea è visible, la linea di base di questo blocco in linea è la linea di base dell'ultima riga, ma se la proprietà di overflow ha un altro valore (ad esempio hidden), la sua linea di base è bordo del margine inferiore.

The documentation says

La linea di base di un 'inline-block' è la linea di base della sua ultima casella riga nel flusso normale, se questo è contrassegnato non in-flusso di scatole di linea o se il suo 'overflow' immobile ha un valore calcolato diverso da 'visibile', nel qual caso la linea di base è il bordo del margine inferiore.

Suggerisco anche di leggere this great article per comprendere completamente l'allineamento verticale di elementi in linea.

fonte

2016-01-11 17:28:03 user3790069

Aggiungi vertical-align al CSS e dovrebbe funzionare:

#myDivTag, #map-canvas { 
    display: inline-block; 
    vertical-align:top; 
    height: 95%; 
    width: 49%; 
    z-index: 0; 
}

fonte

2016-01-11 16:48:40 GaryS

Per favore leggi di nuovo la mia domanda. Ho risolto questo problema, ma non so perché è stato risolto. –

Perché il blocco inline funziona in modo diverso quando viene eseguito l'overflow: nascosto viene applicato?

risposta

Problemi correlati