1. Web
  2. CSS
  3. <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 spezifizieren den inneren display-Typ des Elements, der den Typ des Formatierungskontextes 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 für Legacy-Zwecke 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 unter Verwendung des Flusslayouts (Block-und-Inline-Layout) an.

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

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

flow-root

Das Element erzeugt eine Blockelement-Box, die einen neuen Block-Formatierungskontext bereitstellt 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 Blockelement und ordnet seinen Inhalt gemäß dem Flexbox-Modell an.

grid

Das Element verhält sich wie ein Blockelement und ordnet seinen Inhalt gemäß dem Grid-Modell an.

ruby

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

Hinweis: Browser, die die Zwei-Wert-Syntax unterstützen, setzen bei Fund des inneren Wertes allein, wie zum Beispiel bei Angabe von display: flex oder display: grid, ihren äußeren Wert auf block. Dies führt zu erwartetem Verhalten; zum Beispiel würden Sie erwarten, dass die Box, die auf dem Gittercontainer erstellt wird, eine Block-Level-Box ist, wenn Sie ein Element als display: grid spezifizieren.

Formale Syntax

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

Beispiele

In diesem Beispiel wurde der übergeordneten Box display: flow-root zugewiesen und stellt somit einen neuen BFC bereit und enthält das gefloatete Element.

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