<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
inlineist 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,floatoderoverflow) 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
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
<div class="box">
<div class="float">I am a floated box!</div>
<p>I am content inside the container.</p>
</div>
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 |