| Quellcodebibliothek Statistik Leitseite products/Sources/formale Sprachen/C/Firefox/layout/reftests/css-grid/ (Browser von der Mozilla Stiftung Version 136.0.1©) Datei vom 10.2.2025 mit Größe 3 kB |
|
Quelle grid-abspos-items-002.html Sprache: HTML |
|||||||||||||||||
<!DOCTYPE HTML> <!-- Any copyright is dedicated to the Public Domain. http://creativecommons.org/publicdomain/zero/1.0/ --> <html><head> <title>CSS Test: Testing basic placement and layout of abs.pos. grid items</title> <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug <link rel="help" href="http://dev.w3.org/csswg/css-grid/#abspos-items"> <link rel="match" href="grid-abspos-items-002-ref.html"> <meta charset="utf-8"> <style type="text/css"> body,html { color:black; background:white; font-size:16px; padding:0; margin:0; } .grid { display: grid; transform: translate(1px,2px); border: 1px solid; grid-auto-flow: row; grid-auto-columns: 23px; grid-auto-rows: 7px; padding: 17px 7px 11px 13px; width: 100px; height: 60px; } .zero-size { width:0; height:0; } .auto-size { width:auto; height:auto; } .a { grid-column: 1 / 3; grid-row: 3 / 5; background: blue; } .abs { position: fixed; top:3px; left:1px; right:5px; bottom:1px; opacity: 0.7; } .b { grid-column: auto / 2; grid-row: auto / auto; } .c { grid-column: 9 / auto; /* 9 is outside the grid */ grid-row: 9 / auto; /* 9 is outside the grid */ } .d { grid-column: auto / 1; grid-row: 2 / 1; } .e { grid-column: 4 / auto; grid-row: 3 / auto; } .f { grid-column: 4 / auto; grid-row: auto / 1; } .g { grid-column: 1 / 3; grid-row: 2 / 3; } .h { grid-column: auto / auto; grid-row: auto / auto; } .i { grid-column: span 1 / span 2; grid-row: span 2 / span A; background: lime; } .j { grid-column: span A / span 2; grid-row: span 2 / span 1; background: lime; } span { background: lime; border: 1px solid; } </style> </head> <body> <div style="float:left"> <div class="grid"> <span class="a"></span> <span class="b abs">b</span> </div> <div class="grid"> <span class="a"></span> <span class="c abs">c</span> </div> <div class="grid"> <span class="a"></span> <span class="d abs">d</span> </div> <div class="grid"> <span class="a"></span> <span class="e abs">e</span> </div> <div class="grid"> <span class="a"></span> <span class="f abs">f</span> </div> <div class="grid"> <span class="a"></span> <span class="g abs">g</span> </div> </div><div style="float:left"> <div class="grid"> <span class="a"></span> <div><span class="b abs">b</span></div> </div> <div class="grid"> <span class="a"></span> <x><span class="c abs">c</span></x> </div> <div class="grid"> <span class="a"></span> <span class="d abs">d</span> </div> <div class="grid"> <span class="a"></span> <div><span class="e abs">e</span></div> </div> <div class="grid"> <span class="a"></span> <span class="f abs">f</span> </div> <div class="grid"> <span class="a"></span> <x><span class="g abs">g</span></x> </div> </div><div style="float:left"> <div class="grid zero-size"> <span class="b abs">b</span> </div> <div class="grid auto-size"> <span class="h abs">h</span> </div> <div class="grid" style="height:auto"> <div style="grid-column: 1 / span 3"></div> <div class="i abs">i</div> </div> <div class="grid" style="height:auto"> <div style="grid-column: 1 / span 3"></div> <div class="j abs">j</div> </div> <div class="grid" style="width:43px; height:53px"> <span class="abs" style="grid-column-end:1; grid-row-end:1;">a</span> <span class="abs" style="grid-column-start:1; grid-row-end:1;">b</span> <span class="abs" style="grid-column-end:1; grid-row-start:1;">c</span> <span class="abs" style="grid-column-start:1; grid-row-start:1;">d</span> </div> </div> </body> </html>
¤ Dauer der Verarbeitung: 0.11 Sekunden (vorverarbeitet) ¤*© Formatika GbR, Deutschland |
|
||||||||||||||||
2026-04-04