<display-inside>
Diese Schlüsselwörter spezifizieren den inneren display-Typ eines Elements, der die Art des Formatierungskontexts definiert, der seinen 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 aus Kompatibilitätsgründen als ein einzelnes Schlüsselwort verwendet werden oder wie in der Level-3-Spezifikation zusammen mit einem Wert aus den <display-outside>-Schlüsselwörtern definiert.
Syntax
Gültige <display-inside> Werte:
flow-
Das Element ordnet seinen Inhalt unter Verwendung des Flow-Layouts (Block-und-Inline-Layout) an.
Wenn der äußere Anzeigetyp
inlineist und es an einem Block- oder Inline-Formatierungskontext teilnimmt, dann erzeugt es eine Inline-Box. Andernfalls erzeugt es eine Block-Container-Box.Je nach Wert anderer Eigenschaften (wie
position,float, oderoverflow) und ob es selbst an einem Block- oder Inline-Formatierungskontext teilnimmt, erstellt es entweder einen neuen Block-Formatierungskontext (BFC) für seinen Inhalt oder integriert seinen Inhalt in den Formatierungskontext des übergeordneten Elements. flow-root-
Das Element erzeugt eine Blockelement-Box, die einen neuen Block-Formatierungskontext erstellt und die Position der Formatierungswurzel definiert.
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 das entsprechende HTML-
<ruby>-Element.
Hinweis:
Browser, die die Syntax mit zwei Werten unterstützen, setzen den äußeren Wert auf block, wenn nur der innere Wert gefunden wird, wie beispielsweise bei display: flex oder display: grid. Dies führt zu dem erwarteten Verhalten; wenn Sie beispielsweise ein Element auf display: grid setzen, erwarten Sie, dass die erstellte Box im Grid-Container 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, sodass ein neuer BFC erstellt wird und das schwebende Element enthält.
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 |