1. Web
  2. CSS
  3. Reference
  4. Values
  5. <display-inside>

Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.

View in English Always switch to English

<display-inside>

Diese Schlüsselwörter geben den inneren display-Typ des Elements an, der den Typ des Formatierungskontexts definiert, der seine Inhalte anordnet (vorausgesetzt, es handelt sich um ein nicht ersetztes Element). Diese Schlüsselwörter werden als Werte der display-Eigenschaft verwendet und können aus Kompatibilitätsgründen als einzelnes Schlüsselwort oder wie in der Level-3-Spezifikation definiert zusammen mit einem Wert aus den <display-outside>-Schlüsselwörtern verwendet werden.

Syntax

Gültige <display-inside>-Werte:

flow

Das Element ordnet seine Inhalte mit Hilfe des Flow-Layouts (Block- und Inline-Layout) an.

Wenn sein äußerer Anzeigetyp inline ist und es an einem Block- oder Inline-Formatierungskontext teilnimmt, generiert es eine Inline-Box. Andernfalls generiert es eine Block-Container-Box.

Abhängig vom Wert anderer Eigenschaften (wie position, float, oder overflow) und davon, ob es selbst an einem Block- oder Inline-Formatierungskontext teilnimmt, etabliert es entweder einen neuen Block-Formatierungskontext (BFC) für seine Inhalte oder integriert seine Inhalte in den Formatierungskontext seines übergeordneten Elements.

flow-root

Das Element erzeugt eine Blockelement-Box, die einen neuen Block-Formatierungskontext etabliert und definiert, wo die Formatierungswurzel liegt.

table

Diese Elemente verhalten sich wie HTML-<table>-Elemente. Es definiert eine Block-Level-Box.

flex

Das Element verhält sich wie ein Block-Element und ordnet seine Inhalte gemäß dem Flexbox-Modell an.

grid

Das Element verhält sich wie ein Block-Element und ordnet seine Inhalte gemäß dem Grid-Modell an.

ruby

Das Element verhält sich wie ein Inline-Element und ordnet seine Inhalte gemäß dem Ruby-Formatierungsmodell an. Es verhält sich wie die entsprechenden HTML-<ruby>-Elemente.

Hinweis: Browser, die die Syntax mit zwei Werten unterstützen, werden bei dem alleinigen Auffinden des inneren Wertes, wie z.B. bei display: flex oder display: grid, den äußeren Wert auf block setzen. Dies führt zu dem erwarteten Verhalten; wenn Sie zum Beispiel ein Element als display: grid angeben, würden Sie erwarten, dass die auf dem Grid-Container erzeugte Box eine Block-Level-Box ist.

Formale Syntax

<display-inside> = 
  flow       |
  flow-root  |
  table      |
  flex       |
  grid       |
  ruby

Beispiele

In diesem Beispiel wurde dem übergeordneten Element display: flow-root zugewiesen, sodass ein neuer BFC etabliert wird und das gefloatete Element enthält.

HTML

html
<div class="box">
  <div class="float">I am a floated box!</div>
  <p>I am content inside the container.</p>
</div>

CSS

css
.box {
  background-color: rgb(224 206 247);
  border: 5px solid rebeccapurple;
  display: flow-root;
}

.float {
  float: left;
  width: 200px;
  height: 150px;
  background-color: white;
  border: 1px solid black;
  padding: 10px;
}

Ergebnis

Spezifikationen

Specification
CSS Display Module Level 3
# typedef-display-inside

Browser-Kompatibilität

css.properties.display.flow-root

css.properties.display.table

css.properties.display.flex

css.properties.display.grid

css.properties.display.ruby

Siehe auch

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.
Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden