Block-Elemente innerhalb display: inline-block

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

  •  03-07-2019
  •  | 
  •  

Frage

Ich versuche, einige (vertikal gestapelten) Schau zu stellen: Blockelemente innerhalb eines display: inline-Block-Element. Nach Angaben der CSS-Spezifikation sollte das Inline-Block-Element ein Block enthält, so ist es Anzeige haben kann. Block-Elemente in sich und diese sollen den Rest des Layouts nicht beeinflussen

Doch die Anzeige: Blockelemente im Innern des display: inline-Block-Elemente stören den Rest der Seite; so tut nichts mit überhaupt innerhalb der Inline-Block oder sogar ein Grundelement wie ein Absatz; nur einfacher Text vermeidet Unterbrechung des Restes der Seite (durch die Störung ich andere divs bedeuten Verschiebung nach unten, beispielsweise in diesem Fall der linke rote Block bewegt, um eine Zeile nach unten und hat einen leeren weißen Raum darüber). Ich bin mit Firefox 3.0.6. 

<html><head><style type="text/css">
#left {
  display: inline-block;
  background: red;
  width: 20%;
  height: 100%;
}
#right {
  display: inline-block;
  background: green;
  width: 80%;
  height: 100%;
}
</style></head><body>
  <div id="left">Left</div><div id="right">Right</div>
</body></html>

Die oben zeigt als zwei Scheiben, links rot, rechts grün, wie erwartet. Wenn ich „Recht“ zu

ändern 
<p>Right</p>

oder entfernen Sie sie vollständig oder (wie ich tun möchte) ersetzen Sie es mit ein paar divs, erhalte ich die schlechte Formatierung.

Ist das ein Firefox Bug, oder bin ich etwas falsch zu machen, oder sind meine Erwartungen nicht richtig? (FWIW, IE 7 mangles sie alle gleich, als ob es nicht inline-block nicht versteht, keine Rolle spielt, ist dies eine interne app und ich bin mit Firefox nur.). Ich kann das Layout I Schwimmer / margin erhalten möchten in der Lage, aber ich würde es vorziehen, nicht so zu tun haben.

War es hilfreich?

Lösung

Nun display: inline-block kann ein bisschen schwierig sein Cross-Browser zu erhalten. Es wird mindestens erfordern, ein paar Hacks und für Firefox 2, möglicherweise ein zusätzliches Element.

CSS 

.inlineBlock { display: -moz-inline-stack; display: inline-block; zoom: 1; *display: inline; }

display: -moz-inline-Stack ist für Firefox 2. Alle unmittelbaren Kinder haben müssen display: block oder sonst Block Level-Elemente sein. Beachten Sie, wenn Sie Ihre Inline-Block-Element müssen Wrap schrumpfen Ich glaube, Sie können Anzeige. -Moz-inline-box statt

Zoom: 1 gibt hasLayout auf das Element (IE 7 und unten). Teil 1 des Hack benötigt für IE7 und unter compatibilty.

** Anzeige:. * Inline ist ein Hack zweiten Teil des Hack benötigt für IE7 und unter Kompatibilität

Ich muss gelegentlich Überlauf hinzufügen. Versteckt für IE-Kompatibilität als auch

Für Ihre spezifische Situation denke ich, was Sie brauchen, ist: 

<html><head><style type="text/css">
#left {
  display: inline-block;
  background: red;
  width: 20%;
  height: 100%;
  vertical-align: top;
}
#right {
  display: inline-block;
  background: green;
  width: 80%;
  height: 100%;
  vertical-align: top;
}
</style></head><body>
  <div id="left">Left</div><div id="right"><p>Right</p><p>Right 2</p></div>
</body></html>

Andere Tipps

  

Ich erhalte die schlechte Formatierung.

Sie gebissen werden von Marge kollabiert , ein CSS ‚Klugheit‘, die einen Schmerz ist so oft, wie es ein Segen ist. Die Marge des

kollabiert nach außen ein oberer Rand auf dem Inline-Block zu werden; dies dann verhält sich wie eine Marge würde auf einem ‚inline‘ Elemente würde die vertikale-Ausrichtung der Textzeile heraus drücken.

Sie können aufhören es passiert durch die Ränder von ‚p‘ Elemente zu entfernen und stattdessen mit Polsterung. Alternativ stellt ein nicht leeres Element ohne oberen Rand an der Oberseite des Blockes und einem ohne unteren Rand an der Unterseite.

  

Ist das ein Firefox Bug

Ich denke, vielleicht ja, nach der Spezifikation des:

  

Die Margen von Inline-Block-Elemente kollabieren nicht (auch nicht mit ihr in Fluss Kinder).

inline-block     Dieser Wert bewirkt ein Element ein Inline-Level-Blockbehälter zu erzeugen. Das Innere eines inline-Blöcke wird als Blockfeld formatiert ist, und das Element selbst als eine atomare Inline-Ebene Feld formatiert. visuelle Darstellung Modell

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