| Autor | Zpráva | ||
|---|---|---|---|
| suvel Profil |
#1 · Zasláno: 13. 6. 2016, 14:45:44
Potřebuji skládat pod sebe obdélníky, vycentrované na střed, v závislosti na šířce nadřazeného elementu:
<!doctype> <html> <head> </head> <body> <div style="width:280px;margin:auto;text-align:center;border:2px solid red;"> <div style="display:inline-block;width:100px;height:30px;border:2px solid green;"></div> <div style="display:inline-block;width:100px;height:30px;border:2px solid green;"></div> <div style="display:inline-block;width:100px;height:30px;border:2px solid green;"></div> <div style="display:inline-block;width:100px;height:30px;border:2px solid green;"></div> </div> Ve Firefoxu, Edge a IE se zobrazí správně, zatímco v Chrome a Opeře je spodní dvojice horizontálně posunuta vpravo o 4 px. Co s tím? Předem dík za tipy. |
||
| Bubák Profil |
#2 · Zasláno: 13. 6. 2016, 15:36:15
Popisovaný problém nepozoruji.
Živá ukázka Odkaz Prosím o odkaz na živou ukázku. Křišťálovou kouli nevlastním, tak jsem zkusil kávovou sedlinu, prý by tam mohl být zbloudilý BOM, neviditelný znak, do stránky se dostane třebas při include, a dělá pak neplechu. Možná, že to bude jiný neviditelný znak, třebas tvrdá mezera. Anebo je kód jiný, než v ukázce, ale to se mi zdá jako málo pravděpodobné. Zbloudilý BOM odhalí třebas validator.webylon.info. Nesouvisí s problémem, ale na 1. řádku byl měl mít <!doctype html>, na velikosti písmen nezáleží.
|
||
| suvel Profil |
Bubák:
Máš pravdu, shora uvedený kód je bez problému - k posunu v Chrome a Opeře dochází pouze tehdy, nejsou-li řádky v kódu odsazeny - tento kód druhou řadu posune - viz Živá ukázka: <div style="width:280px;margin:auto;text-align:center;border:2px solid red;"> <div style="display:inline-block;width:100px;height:30px;border:2px solid green;"></div> <div style="display:inline-block;width:100px;height:30px;border:2px solid green;"></div> <div style="display:inline-block;width:100px;height:30px;border:2px solid green;"></div> <div style="display:inline-block;width:100px;height:30px;border:2px solid green;"></div> </div> Teď už tomu ale vůbec nerozumím. |
||
| Keeehi Profil |
Posouvá se to proto, protože vnitřek toho obalového divu ce celý chová jako text. A do textu patří i mezery. Kdyby ty vnitřní elementy byly blokové, na mezerách a odřádkováních by vůbec nezáleželo.
Není to nic pěkného, ale dá se to v tomto konkrétním případě vyřešit takto. Předpokládám, ale, že toto není ro čeho chceš dosáhnout. Takže jak se to má chovat? Jaká rozměry znáš a jaké mají být automatické. Má to mít pevnou šířku, výšku, poměr, nebo se to má v nějakých směrech přizpůsobovat třeba šířce okna? |
||
| suvel Profil |
OK, ale proč se posouvá až ta poslední dvojice? Očekával bych, že se posunou všechny řady... A chová se tak jen Chrome a Opera, ostatní prohlížeče to zobrazí bez posunu...
Živá ukázka Oprava: Omlouvám se, Opera to zobrazí taky dobře. Keeehi: Vnitřní divy mají pevné rozměry, šířka obalového divu se mění. |
||
| Tomáš123 Profil |
#6 · Zasláno: 13. 6. 2016, 16:24:09
suvel:
Pomôže nastaviť nadradenému prvku font-size: 0 a vo vnútri veľkosť písma opäť zväčšiť, nezalamovať riadok, či zalomenia komentovať. Tiež pomáha vynechanie nepovinných koncových značiek niektorých prvkov – medzera sa presunie do vnútra prvku (môžeš značky na posledných dvoch úrovňach zmeniť na <li> a <ul> a koncové tagy </li> neuvádzať). Možností je viac...
„Teď už tomu ale vůbec nerozumím.“ Viacero bielych znakov sa v HTML (mimo <pre>) nahradí jediným. Každému vnútornému divu predchádzal aspoň jeden biely znak, \t. Počet bielych znakov bol jeden alebo dva (čiže jeden). Po odstránení odsadenia tabulátormi bol rozdiel viditeľnejší (žiadny respektíve jeden biely znak), čo tvorilo rozdiel.
Neviem, prečo sa Chrome a Opera správa inak. Možno inak vnímajú prvý biely znak v prvku. |
||
| Keeehi Profil |
Ono ve skutečnosti jsou posunuté všechny, až na poslední.
Pokud na začátek přidáš mezeru, předchozí koncové zalomení se evidentně ignoruje. Celé to bude souviset s tím, jak se prohlížeče chovají k bílým znakům a k toku textu. 
|
||
| suvel Profil |
#8 · Zasláno: 13. 6. 2016, 16:37:05
Díky všem
|
||
| Bubák Profil |
Já taky ne.
Když je (v tomto případěú za každým druhým inline blokem jeden bílý znak (odřádkování, mezera), chová to to v Chrome (a odvozených prohlížečích) chybně. K tomu nedojde, pokud tam není žádný bílý znak, nebo tabulátor, nebo více býlých znaků, jako třeba odřádkování a libovolný počet mezer. Keeehi: Hezky znázorněné, mám na mysli obrázky. „Celé to bude souviset s tím, jak se prohlížeče chovají k bílým znakům a k toku textu.“ Ale pokud je tam jeden nebo více bílých znaků by mělo být jedno, proto mám za to, že se Chrome chová chybně. edit: Keeehi, "zneužil" jsem tvou ukázku a upravil jsem ji tak, že za každým DIVem jsou dva bílé znaky, odřádkování. Živá ukázka Odkaz |
||
|
Časová prodleva: 8 let
|
|||
0