<display-inside> CSS Typ
Diese Schlüsselwörter spezifizieren den inneren display-Typ des Elements, der den Typ des Formatierungskontexts definiert, welcher dessen Inhalt 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 benutzt werden.
Syntax
Gültige <display-inside>-Werte:
flow-
Das Element ordnet seinen Inhalt mit Flow-Layout (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 davon, ob es selbst an einem Block- oder Inline-Formatierungskontext teilnimmt, etabliert es entweder einen neuen Block-Formatierungskontext (BFC) für seinen Inhalt oder integriert seinen Inhalt in den übergeordneten Formatierungskontext. 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 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 und nur den Innenwert finden, wie wenn display: flex oder display: grid angegeben wird, setzen ihren Außenwert auf block. Dies wird zu einem erwarteten Verhalten führen; zum Beispiel, wenn Sie ein Element als display: grid spezifizieren, würden Sie erwarten, dass die Box, die auf dem Grid-Container erstellt wird, eine Block-Level-Box ist.
Formale Syntax
<display-inside> =
flow |
flow-root |
table |
flex |
grid |
ruby
Beispiele
In diesem Beispiel wurde der übergeordneten Box display: flow-root gegeben und etabliert so einen neuen BFC 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
| Spezifikation |
|---|
| CSS Display Module Level 3 # typedef-display-inside |