Nová ukázka
Reset
Načíst z URL
Uložit a získat odkaz
Nevyplňujte
Napiště „nejsem robot“
▶
Přepnout zobrazení
Výsledek
<div class="container"> <p class="column">obrazek</p> <p class="column">Nějaká nadpis</p> <p class="column">Text asůldfkj aůsj fůasjf ůafsd </p> <p class="column">obrazek</p> <p class="column">Nějaká nadpis, který ale může být různě dlouhý a tím pádem dá výšce buňky zabrat</p> <p class="column">Text asůldfkj aůsj fůasjf ůafsd </p> <p class="column">obrazek</p> <p class="column">Nějaká nadpis</p> <p class="column">Text asůldfkj aůsj fůasjf ůafs Taktéž text může být různdě dlouhy a potřebují aby okolní buňky se tomu na výšku přizpůsobily</p> <p class="column">obrazek</p> <p class="column">Nějaká nadpis</p> <p class="column">Text asůldfkj aůsj fůasjf ůafsd </p> <p class="column">obrazek</p> <p class="column">Nějaká nadpis, který ale může být různě dlouhý a tím pádem dá výšce buňky zabrat</p> <p class="column">Text asůldfkj aůsj fůasjf ůafsd </p> <p class="column">obrazek</p> <p class="column">Nějaká nadpis</p> <p class="column">Text asůldfkj aůsj fůasjf ůafs Taktéž text může být různdě dlouhy a potřebují aby okolní buňky se tomu na výšku přizpůsobily</p> </div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
.container { max-width: 1180px; margin: 30px auto; padding: 10px 0px 30px 0px; display: grid; grid-template-rows: repeat(3, 1fr); gap: 0px 10px; grid-auto-flow: column; border-bottom: 1px solid black; } /* etc: */ body { margin: 1.5em; font-size: 130%; } .column { background: #b3e888; padding: 1em; margin-top: 0; margin-bottom: 0; font-family: monospace; text-align: center; border: 1px solid darkgreen; /* "border-collapse" hack */ margin-left: -1px; margin-top: -1px; } .container { border: 5px solid black; padding: 1em; margin-bottom: 2em; }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>