Live
x
<html> <head> <title>Formularze</title> <style> body { background: lightblue; box-sizing: border-box; } div { background: lightpink; border: 1px solid grey; padding: 10px; margin: 20px 0; } span { display: inline-block; background: cornflowerblue; color: white; padding: 10px; text-align: center; margin: 10px; } div.relative { width: 80vw; } div.relative span { width: 25%; } div.static { width: 800px; } div.static span { width: 200px; } </style> </head> <body> <h1>Responsywność</h1> <div class="relative"> <h2>Jednostki względne 🥰 <code>(width: 80vw)</code></h2> <span><code>width: 25%</code></span> <span><code>width: 25%</code></span> <span><code>width: 25%</code></span> </div> <div class="static"> <h2>Jednostki bezwzględne 😢 <code>(width: 800px)</code></h2> <span><code>width: 200px</code></span> <span><code>width: 200px</code></span> <span><code>width: 200px</code></span> </div> </body></html>
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.