| 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-ref.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"> <meta charset="utf-8"> <style type="text/css"> body,html { color:black; background:white; font-size:16px; padding:0; margin:0; } .grid { /*display: grid;*/ position: relative; top:2px; left:1px; 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:0px; } .a { position: absolute; left: 13px; top: 31px; height: 12px; width: 44px; background: blue; } .abs { position: absolute; opacity: 0.7; width: 21px; height: 15px; } .b { left: 1px; top: 3px; bottom: 1px; width: 28px; height: auto; } .c { right: 5px; bottom: 1px; width: 112px; height: 82px; } .d { left: 1px; top: 20px; width: 5px; height: 1px; } .e { right: 5px; bottom: 1px; width: 112px; height: 51px; } .f { right: 5px; top: 3px; width: 112px; height: 11px; } .g { left: 14px; top: 27px; width: 38px; height: 1px; } .h { top:3px; left:1px; right:5px; bottom:1px; width:auto; height:auto; } .i, .j { top:3px; left:1px; right:5px; bottom:1px; border:none; width:auto; height:auto; } 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> <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 zero-size"> <span class="b abs" style="width:12px">b</span> </div> <div class="grid auto-size"> <span class="h abs">h</span> </div> <div class="grid" style="height:7px"> <span class="i abs">i</span> </div> <div class="grid" style="height:7px"> <span class="j abs">j</span> </div> <div class="grid" style="width:43px; height:53px"> <span class="abs" style="left:1px; top:3px; height:11px; width:5px;">a</span> <span class="abs" style="right:5px; top:3px; height:11px; width:42px;">b</span> <span class="abs" style="left:1px; bottom:1px; height:58px; width:5px;">c</span> <span class="abs" style="right:5px; bottom:1px; height:58px; width:42px;">d</span> </div> </div> </body> </html>
¤ Dauer der Verarbeitung: 0.0 Sekunden (vorverarbeitet) ¤*© Formatika GbR, Deutschland |
|
||||||||||||||||
2026-04-04