inline-block verunstaltet mit relativer Positionierung

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

  •  21-09-2019
  •  | 
  •  

Frage

Ich habe den folgenden Code: 

    <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>

Die zweite div positioniert ist, nicht auf die 32 x-Position, wenn ich die Anzeige entfernen: inline-block-Eigenschaft, die ich brauche. Gibt es eine Möglichkeit, um dieses?

Edit: es scheint zu funktionieren, wenn ich Anzeige entfernen. Inline-block, aber dann werden die Bildlaufleisten erscheinen horizontal (wie die div etwas unsichtbaren Raum nehmen)

War es hilfreich?

Lösung

Sie sollten die Art und Weise position:absolute Elemente verwenden, werden angezeigt, wenn innerhalb position:relative.
Darüber hinaus die horizontale Bildlaufleiste zu vermeiden, verwenden Sie overflow-y.

Arbeits Beispiel: http://jsbin.com/uveni3

Andere Tipps

Wenn "inline-block" Eigenschaften verwenden, sollen Sie immer Ihren HTML-Starttag in einem DTD-Format starten. eine Platzierung soll dieses Problem zu beheben.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top