Nová ukázka
Reset
Načíst z URL
Uložit a získat odkaz
Vztahuje se k…
Nevyplňujte
Napiště „nejsem robot“
▶
Přepnout zobrazení
Výsledek
<div id="obal"> <div class="bunka"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus nec enim sit amet diam egestas vehicula.</p> </div> <div class="bunka"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus nec enim sit amet diam egestas vehicula. Sed cursus a lorem vel porta. Duis justo dolor, efficitur faucibus maximus vitae, auctor sed nisl.</p> </div> <div class="clear-mobile"></div> <div class="bunka"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus nec enim sit amet diam egestas vehicula. Sed cursus a lorem vel porta. Duis justo dolor, efficitur faucibus maximus vitae, auctor sed nisl. Pellentesque et sagittis diam, vitae malesuada leo.</p> </div> <div class="clear-tablet"></div> <div class="bunka"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus nec enim sit amet diam egestas vehicula. Sed cursus a lorem vel porta.</p> </div> <div class="clear-pc clear-mobile"></div> <div class="bunka"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus nec enim sit amet diam egestas vehicula.</p> </div> <div class="bunka"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus nec enim sit amet diam egestas vehicula. Sed cursus a lorem vel porta. Duis justo dolor, efficitur faucibus maximus vitae, auctor sed nisl.</p> </div> <div class="clear-tablet clear-mobile"></div> <div class="bunka"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus nec enim sit amet diam egestas vehicula. Sed cursus a lorem vel porta. Duis justo dolor, efficitur faucibus maximus vitae, auctor sed nisl. Pellentesque et sagittis diam, vitae malesuada leo.</p> </div> <div class="bunka"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus nec enim sit amet diam egestas vehicula. Sed cursus a lorem vel porta.</p> </div> <div class="clear-pc clear-mobile"></div> </div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
.bunka { float: left; width: 25%; } .bunka p { padding: 1em; } .clear-pc { clear: both; } @media (max-width: 800px) { .bunka { width: 33.3%; } .clear-tablet { clear: both; } .clear-pc { clear: none; } } @media (max-width: 500px) { .bunka { width: 50%; } .clear-tablet { clear: none; } .clear-mobile { clear: both; } }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>