<display-inside>
Diese Schlüsselwörter spezifizieren den inneren display
-Typ des Elements, 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 ein 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 mittels Flusslayout (Block-und-Inline-Layout) an.
Wenn sein äußerer Anzeigetyp
inline
ist und es in einem Block- oder Inline-Formatierungskontext beteiligt ist, erzeugt es ein Inline-Box. Andernfalls erzeugt es ein Blockcontainer-Box.Abhängig vom Wert anderer Eigenschaften (wie
position
,float
oderoverflow
) und ob es selbst in einem Block- oder Inline-Formatierungskontext beteiligt ist, etabliert es entweder einen neuen Block-Formatierungskontext (BFC) für seine Inhalte oder integriert seine Inhalte in den Formatierungskontext des übergeordneten Elements. flow-root
-
Das Element erzeugt ein Blockelement-Box, das einen neuen Block-Formatierungskontext etabliert und den Formatierungs-Ursprung 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 die entsprechenden HTML
<ruby>
-Elemente.
Hinweis:
Browser, die die Zwei-Werte-Syntax unterstützen, setzen ihren äußeren Wert auf block
, wenn nur der innere Wert gefunden wird, wie zum Beispiel bei der Angabe display: flex
oder display: grid
. Dies führt zu einem erwarteten Verhalten; beispielsweise erwarten Sie, dass die Box, die durch das Grid-Container-Element erstellt wird, eine Block-Level-Box ist, wenn Sie ein Element mit display: grid
spezifizieren.
Formale Syntax
Beispiele
In diesem Beispiel ist der übergeordnete Box display: flow-root
zugewiesen, wodurch ein neuer BFC etabliert wird und das schwebende Element enthalten ist.
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 |
Browser-Kompatibilität
css.properties.display.flow-root
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
flow-root |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
css.properties.display.table
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
table |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
css.properties.display.flex
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
flex |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- See implementation notes.
- Requires a vendor prefix or different name for use.
- Has more compatibility info.
css.properties.display.grid
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
grid |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- See implementation notes.
- Requires a vendor prefix or different name for use.
- Has more compatibility info.
css.properties.display.ruby
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
ruby |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support