Autor Zpráva
suvel
Profil
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
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
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
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

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: