inline-block scombina con posizionamento relativo

StackOverflow https://stackoverflow.com/questions/2080956

  •  21-09-2019
  •  | 
  •  

Domanda

Ho il seguente codice: 

    <HTML>
<head>
<style>div{border:dashed 1px silver}</style>
</head>
<BODY style="background: #fff;">

<div style="position: absolute; background: #0f0; width: 256px; height: 96px; overflow: scroll;">

<DIV style=" display: inline-block;position: relative;top: 64px; left: 32px;">
<DIV style="width: 18px; height: 14px; float: left; background: #f00;"></DIV>
<DIV style="float: left">First</DIV>
<div style="clear: both;"></div></DIV>

<DIV style=" display: inline-block;position: relative;top: 96px; left: 32px;">
<DIV style="width: 18px; height: 14px; float: left; background: #0f0;"></DIV>
<DIV style="float: left">Second</DIV><div style="clear: both;"></div></DIV>

</div>

</BODY>
</HTML>

Il secondo div non è posizionato sulla posizione di 32 x meno che rimuove il display: struttura inline-block, che ho bisogno. C'è un modo per aggirare questo?

Edit: sembra funzionare se tolgo di visualizzazione:. Inline-block, ma poi le barre di scorrimento apparirò in orizzontale (come il div richiede un po 'di spazio invisibile)

È stato utile?

Soluzione

Si dovrebbe usare il modo in cui gli elementi position:absolute vengono visualizzati quando all'interno position:relative.
Inoltre, per evitare la barra di scorrimento orizzontale, utilizzare overflow-y.

Esempio di applicazione: http://jsbin.com/uveni3

Altri suggerimenti

Quando si usa "inline-block" proprietà, si dovrebbe sempre iniziare il vostro tag di apertura HTML in un formato DTD. mettendo uno ci dovrebbe risolvere questo.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top