Autor Zpráva
RastyAmateur
Profil
Krásné odpoledne, večer...

Mám problém. Potřeboval bych, aby divy byly hezky vedle sebe. Když mám všude jednořádkový nadpis a popis, tak to jde, ale když někde zvolím delší text, vše to začne skákat...

Živá ukázka

První a poslední řádka - paráda. Vyrovnané, prostě krása! Ale ta mezi nima...

Obecně motivaci jsem čerpal z Verticaly -> ...(like texts or links) -> It is multiple lines

Děkuji, RA
Fisir
Profil
Reaguji na RastyAmateura:
Myslím, že nejjednodušší by bylo tam vrazit tabulku (ukázka je opravdu jen hrubý nástřel).
RastyAmateur
Profil
Fisir:
Děkuji za reakci a radu. Asi to budu muset použít, ale raději tam vložím normální tabulku... Přijde mi to přehlednější :-)
Tomáš123
Profil
RastyAmateur:
Tabuľka má obsahovať tabuľkové dáta. Vzhľad má byť definovaný v CSS. Ak sa nejedná o obsah súci do tabuľky, nemá tam tabuľka čo hľadať.

Pre základne značky tabuľky v HTML existujú CSS alternatívy správajúce sa rovnako:
<table> - display: table
<tr>    - display: table-row
<td>    - display: table-cell

První a poslední řádka - paráda. Vyrovnané, prostě krása! Ale ta mezi nima...
Kde by som mal vidieť rozdiel? Všetko mám vertikálne aj horizontálne vystredené...
User
Profil *
Myslím že bude stačit přidat
a.box{
    vertical-align: top;
}
RastyAmateur
Profil
Tomáš123:
Děkuji za přehled, velice mi pomohl. Nemusím to tedy dělat přes tabulku :-) A nebo to (ač nechtíc) udělám pomocí JS...


Ještě dotaz. Narazil jsem na článek Flexboxy, a rád bych se zeptal, jak se to pak řeší, když je nějaký nepodporující prohlížeč (např. Explorer <10). Děkuji
Tomáš123
Profil
RastyAmateur:
Vždy sa to rieši inak. Niekedy existuje alternatíva s lepšou podporou bez nutnosti upustiť z nárokov (typicky náhrada tabuľkovými hodnotami vlastnosti display), inokedy sa môže dať požiadavka vyskladať z iných vlastností.

Flexbox priniesol niekoľko možností, ktoré sa nedajú v CSS (bez znalosti doplňujúcich vlastností objektov) vôbec riešiť... Všetko by ale mal dokázať spočítať JavaScript.

Ak chceš, aby sa stránka zobrazila poriadne čo najväčšiemu množstvu užívateľov, oplatí sa hľadať alternatívne cesty k výsledku.

Tak napríklad:
div {
  display: table; /* Použil by sa display: table. */
  /* flex s prefixami */ /* Ak prehliadač pozná nejakú z hodnôt, deklaráciu aplikuje a neskôr uvedená deklarácia prebije nastavenú hodnotu table. */
  display: flex; /* Ak prehliadač podporuje aj display: flex, prebije hodnotu s prefixom. */
}
Ak prehliadač nepozná žiadnu z uvedených hodnôt displayu (napr. IE7 a staršie), aplikuje pôvodnú hodnotu block. Tento „druh“ kaskády som otestoval iba v IE8. Iný starší prehliadač nemám momentálne k dispozícii.
Bubák
Profil
Tomáš123:
Tento ‚druh‘ kaskády som otestoval iba v IE8. Iný starší prehliadač nemám momentálne k dispozícii.
IE7 neumí tabulkové hodnoty display, info třebas v www.lupa.cz/clanky/navrat-modreho-e a v caniuse.com/#feat=css-table
Tomáš123
Profil
Bubák:
Áno, viem, testoval som to iba s display: flex. Kaskádou som nemyslel všetky (tri) úrovne.

V tom, že sa display v prípade nepoznanej hodnoty zmení na predvolený by sa správanie prehliadačov líšiť nemalo (ak teda nebude kvôli neznámej hodnote ignorovaný celý blok – nedáva zmysel, predvolený display sa nezmení, ani keby bol ignorovaný celý CSS súbor, pardón). Podstatou testu bolo zistiť, či prehliadač skočí hneď na predvolenú hodnotu alebo zastaví na prvej, ktorú spozná. IE8 sa zastavil. Iné prehliadače som netestoval.
RastyAmateur
Profil
Děkuji za rady, oboum :-)

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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