| Autor | Zpráva | ||
|---|---|---|---|
| Levoš Profil |
#1 · Zasláno: 26. 9. 2013, 10:15:14
Prosím mám dotaz. Když do bloku dám další blok a v tom jsou další bloky, který se obtékají, proč se velikost prvních dvou bloků nepřizpůsobí velikosti obsahu těch co obtékají. U prvních dvou nezadávám velikost, protože ji neznám. Ve sloupcích je text velkého rozsahu, další obsah a další bloky, obrázky atd. Jak se toto řeší ? Protože tím, že se nenatáhnou podle sloupců dělá to na stránce vážné problémy. Děkuji předem za radu.
<div style="background-color: #CC00FF; width: 800px; border: 5px solid #FF0000;"><!-- První blok hlavní - nenatahuje se podle velikosti sloupců - proč ?--> <div style="background-color: #CCCCCC;border: 2px solid #FF8888"><!-- Druhý blok vnitřní - nenatahuje se podle velikosti sloupců - proč ?--> <div style="background-color: #0080FF; width: 300px; height: 100px; float: left;">sloupec levý - nejaký velký obsah</div><!-- Levý sloupec - délka 100px jen pro příklad, jinak ji nezadávám --> <div style="background-color: #00FFFF; width: 300px; height: 100px; float: right;">sloupec pravý - nějaký velký obsah</div><!-- Pravý sloupec - délka 100px jen pro příklad, jinak ji nezadávám --> </div></div> |
||
| Str4wberry Profil |
#2 · Zasláno: 26. 9. 2013, 10:58:18
Tipoval bych, že chybí
clear za posledním plavajícím <div>em.
Pokud byste chtěl ještě oba sloupce stejně vysoké, dá se to řešit třeba obrázkem. |
||
| Levoš Profil |
Dík za radu, ale pořád nevím proč. Clear asi není řešením, dělá něco jiného. Pro názornost vkládám obrázek ze stránky http://jecas.cz/float#clear
[img]http://www.lupicek.cz/s_obtok/sloupce01.png [/img] a [img]http://www.lupicek.cz/s_obtok/sloupce003.png [/img] |
||
| peta Profil |
Ten modry musi byt display:inline-block a za poslednim uvnitr bys mel mit div s clear, aby zrusil obtekani.
A proc to dela, je uplne logicke. Plovouci prvek plave na radku, neroztahuje blok. Pokud nezmenis diplay:inline (radek) na neco jineho. Nektere prohlizece to delaji automaticky. Edit2: A jo, ty tam mas div, ale ten se chova podobne. |
||
| Levoš Profil |
#5 · Zasláno: 26. 9. 2013, 13:58:10
Díky moc. Pomohlo mi to display:inline-block. Super. Viz odkaz http://kod.djpw.cz/egc
To CLEAR nevím vůbec kam dát ? Úplně dole vznikla malá mezera. ( fialová barva ) Nevíte jak odstranit ? <div style="background-color: #CC00FF; width: 800px; display: inline-block; "> <div style="background-color: #CCCCCC; width: 700px;display: inline-block; "> <div style="background-color: #0080FF; width: 300px; height: 100px; float: left;">1. sloupec</div> <div style="background-color: #00FFFF; width: 300px; height: 200px; float: right;">2. sloupec</div> </div></div> |
||
| Trejpa Profil |
#6 · Zasláno: 26. 9. 2013, 14:14:55
Levoš:
„Úplně dole vznikla malá mezera. ( fialová barva ) Nevíte jak odstranit ?“ Mezera pod obrázkem. „To CLEAR nevím vůbec kam dát ?“ <div style="background-color: #CC00FF; width: 800px;"> <div style="background-color: #CCCCCC; width: 700px;"> <div style="background-color: #0080FF; width: 300px; height: 100px; float: left;">1. sloupec</div> <div style="background-color: #00FFFF; width: 300px; height: 200px; float: right;">2. sloupec</div> <div style=clear:both></div> </div></div> Nebo to můžeš vyřešit i jinak: <div style="background-color: #CC00FF; width: 800px;"> <div style="background-color: #CCCCCC; width: 700px; overflow: auto;"> <div style="background-color: #0080FF; width: 300px; height: 100px; float: left;">1. sloupec</div> <div style="background-color: #00FFFF; width: 300px; height: 200px; float: right;">2. sloupec</div> </div></div> Zbytečně nastavuješ výšku. V případě potřeby použij minimální výšku (min-height). Přetypování bloku na inline-block nefunguje ve starším IE a vlastně netuším, proč ho tady používáš. |
||
| Levoš Profil |
#7 · Zasláno: 27. 9. 2013, 15:47:08
Díky moc. :) Vyřešil jsem to první variantou
<div style=clear:both></div>.
|
||
|
Časová prodleva: 11 let
|
|||
0