column-grid-lanes-container-baseline-006-ref.html (2228B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <link rel="stylesheet" href="/fonts/ahem.css"> 6 <style> 7 .container { 8 display: flex; 9 gap: 20px; 10 border: 2px solid blue; 11 padding: 10px; 12 font: 16px/1 Ahem; 13 width: 900px; 14 text-decoration: underline; 15 position: relative; 16 } 17 18 .reference-container { 19 margin-left: 116px; 20 width: 350px; 21 background: #f0f0f0; 22 height: 164px; 23 position: relative; 24 } 25 26 .reference-item { 27 background: lightblue; 28 padding: 6px; 29 font-size: 14px; 30 position: absolute; 31 box-sizing: border-box; 32 text-decoration: underline; 33 } 34 35 .text-reference { 36 background: yellow; 37 font-size: 10px; 38 width: 80px; 39 height: 10px; 40 padding: 8px; 41 position: absolute; 42 text-decoration: underline; 43 } 44 45 .reference-item:nth-child(1) { 46 height: 82px; 47 font-size: 20px; 48 background: salmon; 49 top: 0; 50 left: 0; 51 width: 170px; 52 } 53 54 .reference-item:nth-child(2) { 55 height: 72px; 56 background: plum; 57 top: 92px; 58 left: 90px; 59 width: 170px; 60 } 61 62 .reference-item:nth-child(3) { 63 height: 37px; 64 font-size: 10px; 65 background: peachpuff; 66 top: 0; 67 left: 180px; 68 width: 80px; 69 } 70 71 .reference-item:nth-child(4) { 72 height: 52px; 73 font-size: 20px; 74 background: turquoise; 75 top: 0; 76 left: 270px; 77 width: 80px; 78 } 79 </style> 80 </head> 81 <body> 82 <div class="container"> 83 <div class="text-reference" style="top: 10px; left: 10px;">Reference</div> 84 <div class="reference-container" style="margin-top: 2px;"> 85 <div class="reference-item">Item 1</div> 86 <div class="reference-item">Item 2</div> 87 <div class="reference-item">Item 3</div> 88 <div class="reference-item">Item 4</div> 89 </div> 90 </div> 91 <div class="container"> 92 <div class="text-reference" style="top: 103px;">Reference</div> 93 <div class="reference-container"> 94 <div class="reference-item">Item 1</div> 95 <div class="reference-item">Item 2</div> 96 <div class="reference-item">Item 3</div> 97 <div class="reference-item">Item 4</div> 98 </div> 99 </div> 100 </body> 101 </html>