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 class="presne-obtekani"> <div class="zvyraznit"> <u class="w3"></u> <u class="w4"></u> <u class="w5"></u> <u class="w5"></u> <u class="w4"></u> <u class="w5"></u> <u class="w6"></u> <u class="w9"></u> <u class="w11"></u> <p>Text obtékající relativně přesně obrázek. Obrázek je nastaven jako <code>background: url(obrazek.jpg)</code> rodiči, kde je tento text.<p> <p>V kódu před textem jsou elementy s <code>float: right</code> a různou šířkou, které zabírají prostor nad částí obrázku, která nemá být překryta.</p> <p><button>Zvýraznit <i>překážející</i> elementy</button></p> </div> </div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
p {line-height: 2em} .presne-obtekani { width: 400px; background: #F4F4F4 url(http://jecas.cz/files/float/kimi.jpg) right top no-repeat; } .zvyraznit u {background: rgba(255, 255, 255, .5); border-left: 4px solid red} .presne-obtekani u { float: right; clear: right; height: 2em; } .w2 {width: 2em} .w3 {width: 3em} .w4 {width: 4em} .w5 {width: 5em} .w6 {width: 6em} .w7 {width: 7em} .w8 {width: 8em} .w9 {width: 9em} .w10 {width: 10em} .w11 {width: 11em}
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>