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="wrapper"> <div id="div1">Zkus měnit výšku #div1</div> <div id="div2"> XXX <br> YYY <br> ZZZ <br> AAA <br> BBB <br> CCC </div> </div> <p>Margin-left je třeba kvůli různé výšce levé části. Zkus si ji změnit na něco kolem 25px. Pokud by #div1 byl zaručeně alespoň stejně velký jako #div2, nebyl by potřeba. <p>Overflow zase zaručuje ukončení obtékání, zachrání situaci, když by levý sloupec byl delší než pravý. Pokud by byl #div2 delší nebo roven #div1, nebyl by potřeba. <p>Tvůj problém je v tom, že jakmile něčemu dáš float, ztratí to možnost automatické velikosti.
HTML
Autoformát
Standardní režim
Mobilní zobrazení
#wrapper{ /* zaručuje, že výška wrapperu bude nejvyšším z #div1, #div2 */ overflow: hidden; } #div1 { min-width: 150px; width: 30%; height: 250px; background-color: red; float: left; } #div2 { /* nefloatovat; ponechat automatickou šířku a odrzit odleva */ margin-left: 30%; height: 250px; background-color: blue; } @media (max-width: 500px) { /* toto odpovídá stavu, kdy 30% = 150px */ /* chceme změnit vzdálenost odleva na 150px */ #div2 { margin-left: 150px; } }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>