Diskuze: Řazení elementů vedle sebe

pgarsky

Člen

pgarsky:24.7.2016 9:03

Kód:

<table class="onas1">
    <thead>
    <tr>
        <th>Nadpis</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Text<br/></td>
    </tr>
    </tbody>
</table>
<table class="onas2">
    <thead>
    <tr>
        <th>Nadpis</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Text<br/></td>
    </tr>
    </tbody>
</table>
<table class="onas3">
    <thead>
    <tr>
        <th>Nadpis</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Text<br/></td>
    </tr>
    </tbody>
</table>

Rád bych věděl, jak udělat v CSS, aby se zařadily vedle sebe.

Odpovědět

24.7.2016 9:03

Pokud ti něco jde těžko, znamená to, že jdeš tou správnou cestou...

Jan Lupčík

Tvůrce

Jan Lupčík:24.7.2016 9:08

Mohu se zeptat, proč to řešíš přes tabulku? Nebyl by lepší div?
A pro řazení blokových prvků vedle sebe stačí do CSS přidat toto:

table, div {    /* nevím, jestli se rozhodneš pro ten div */
    display: inline-block;
}

Nahoru Odpovědět

24.7.2016 9:08

TruckersMP vývojář

pgarsky

Člen

pgarsky:24.7.2016 9:30

Děkuji za radu, jsem začátečník.

Nahoru Odpovědět

24.7.2016 9:30

Pokud ti něco jde těžko, znamená to, že jdeš tou správnou cestou...

VitekST

Člen

VitekST:25.7.2016 9:18

Buďto přes inline-block, nebo můžeš jít také přes flexbox, který se ti dokáže přizpůsobit podle položek a nabízí třeba i centrování.

CSS:

.container{
        display: flex;

        flex-direction: row;
        justify-content: center;
}

HTML:

<div class="container">
        <div>Nadpis 1</div>
        <div>Nadpis 2</div>
        <div>Nadpis 3</div>
</div>

Masivně to zjednoduší kód a nabízí to mnohem více věcí než tuto formu flexibilního layoutu.
Více zde: https://css-tricks.com/…-to-flexbox/

Akceptované řešení
+20 Zkušeností
+2,50 Kč

Nahoru Odpovědět

25.7.2016 9:18

Tomáš123

Člen

Tomáš123:25.7.2016 10:51

Alebo cez ideálny float v spolupráci s vlastnosťou clear alebo absolútne poziciovanie v kombinácii s relatívnym. Prípadne rozvediem ukážkovými kódmi, vysvetlením, či odkazmi.

Navrhol by som uprednostňovať metódy v tomto poradí:

obtekanie (float)
poziciovanie
tabuľkové hodnoty
flexbox

Zmena displayu na inline-block je niekedy kvôli zachovávaniu bielych znakov nevhodná. Nie je to bežná metóda.

Nahoru Odpovědět

25.7.2016 10:51

Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.

VitekST

Člen

VitekST:25.7.2016 11:08

Proč flexbox až jako poslední?
Jedná se o moderní a vysoce flexibilní metodu tvorby layoutu, pokud mě paměť neklame?

Nahoru Odpovědět

25.7.2016 11:08

pgarsky

Člen

pgarsky:25.7.2016 12:41

No právě toto mám na webu v layoutu a když bych použil float, tak by se to nezařadilo do layoutu

Nahoru Odpovědět

25.7.2016 12:41

Pokud ti něco jde těžko, znamená to, že jdeš tou správnou cestou...

Tomáš123

Člen

Tomáš123:25.7.2016 12:44

Pretože má najhoršiu podporu. Predsa ak ide rovnakého vzhľadu dosiahnuť inou, lepšie podporovanou, metódou, je výhodnejšie ju uprednostniť.

<code>Display: inline-block</code> je na stavbu layoutu <a href="http://kod.djpw.cz/oaac">nevhodný</a> podobne ako <a href="https://diskuse.jakpsatweb.cz/?action=vthread&forum=19&topic=118545" title="Odkaz na DJPW.cz">relatívne poziciovanie</a>.

Nahoru Odpovědět

25.7.2016 12:44

Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.

Tomáš123

Člen

Tomáš123:25.7.2016 12:48

Čo toto?

a když bych použil float, tak by se to nezařadilo do layoutu

Áno, bežne je obtekaný prvok vyňatý z toku dokumentu. Plávanie ale ide ukončiť <code><a href="https://www.jakpsatweb.cz/css/clear.html" title="Popis vlastnosti clear na JPW.cz">clear</a>om</code> a nadradený element tak upovedomiť o pozícii a výške obtekaného prvku. Podobný účinok má, ak nadradenému prvku nastavíš <code>overflow</code> iný ako <code>visible</code>.

Editováno 25.7.2016 12:50

Nahoru Odpovědět

25.7.2016 12:48

Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:25.7.2016 13:45

Nejhorší podpora? Jestli neděláš stránky, na který budou koukat jenom v muzeu, pak by ti současná podpora měla bohatě stačit, viz http://caniuse.com/#…

// Tabulka před flexboxem ? No tak to se pak nemáme o čem bavit

Editováno 25.7.2016 13:46

Nahoru Odpovědět

25.7.2016 13:45

Neaktivní uživatelský účet

VitekST

Člen

VitekST:25.7.2016 13:54

Jak tady kolega Jiří Gracík zmínil, podporu má dobrou,
IE sice v aktuální verzi flexbox podporuje jen částečně, ale who uses IE these days.

Nahoru Odpovědět

25.7.2016 13:54

Tomáš123

Člen

Tomáš123:25.7.2016 14:32

Tabuľkové hodnoty (vlastnosti <code>display</code>*), nie tabuľka.

*V príspevku, na ktorý reaguješ som toto nepripísal. Pardón za nejasnosť.

Jestli neděláš stránky, na který budou koukat jenom v muzeu, pak by ti současná podpora měla bohatě stačit

Vyvracia azda argument subjektívne postačujúcej podpory objektívne najhoršiu podporu z vymenovaných riešení? Použil by si na úlohu, ktorú zvládne vyriešiť <code>float</code> flexbox? Ak áno, prečo?

Nahoru Odpovědět

25.7.2016 14:32

Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.

Tomáš123

Člen

Tomáš123:25.7.2016 14:43

Dobrú na trojku?

IE sice v aktuální verzi flexbox podporuje jen částečně, ale who uses IE these days.

Explorer nie je jediný prehliadač, ktorý flexbox nepodporuje.

who uses IE these days

Podobnú pripoviedku nepovažujem za relevantný argument. Odpovedz prosím aj ty na otázky, ktoré som položil Jiřímu Gracíkovi vo svojom predchádzajúcom príspevku. Zaujímajú ma dôvody prečo používať riešenie s horšou podporou bez zjavného benefitu.

Nahoru Odpovědět

25.7.2016 14:43

Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:25.7.2016 15:49

Flexbox má víc než dost zjevných benefitů, které se jinak uspokojivě řešit nedají, nebo ne tak pohodlně a elegantně. Věci, které bych mohl řešit rozumně pomocí vlastností float, bych flexboxem zatím neřešil, protože mám napsáno poměrně dost stylů, které řeší většinu problémů, které si dokážu vytvořit. Pokud bych měl psát čístý web z ničeho, pak nejspíš použiju flexbox.
S tou tabulkou jsem se seknul, i když styly, které simulují chování tabulky, také neschvaluji.

who uses IE these days

S touhle myšlenkou taky nesouhlasím. Netvářím se totiž, že by lidé IE nepoužívali (bavím se hlavně o verzích <= 9, ty zbylé mě nedrásají), jen je ignoruji. Dokud budeme dělat webové stránky tak, aby fungovali i v kéžby mrtvých prohlížečích, tak si přece sami házíme klacky pod nohy. Takovou cestou se jich nikdy nezbavíme.

Nahoru Odpovědět

25.7.2016 15:49

Neaktivní uživatelský účet

VitekST

Člen

VitekST:25.7.2016 18:26

Otázka A:
Efektivně a elegantně vyřešil (téměř) všechny problémy, které jsem musel při tvorbě layoutů řešit.
Ostatní řešení sice fungovala, většinou ale byla složitější nebo ne tak elegantní.

Otázka B:
Ano, použil. I přes to, že je podpora "dobrá za tři", jak říkáš. Jsem toho názoru, že prohlížeč... (více v následujícím textu, nechci se opakovat)

//

S tím prohlížečem... Samozřejmě, nějaké procento uživatelů internetu ještě IE používá, narážel jsem na to, že IE je zastaralý.

Jak po oficiální stránce, přes technickou stránku, tak po morální stránce.

Nicméně, je tu organizace W3C, které definuje standardy jako je HTML5 a CSS3. Je tu od toho, aby vytvořila jednotnou a univerzální specifikaci těchto dvou jazyků a jejích "fíčur".

Jestli prohlížeč takovouto specifikaci nepodporuje, je podle mého názoru zastaralý, nevidím tedy důvod proč web optimalizovat právě pro tyto prohlížeče.

Jestliže vývojář prohlížeče nechce svůj prohlížeč přizpůsobovat podle aktuálních standardů, které W3C definuje, tak asi ho zatrhnul, nebo je sám proti sobě.

Nahoru Odpovědět

25.7.2016 18:26

pgarsky

Člen

pgarsky:25.7.2016 18:53

Takže kterou funkci mám nakonec použít ?

Nahoru Odpovědět

25.7.2016 18:53

Pokud ti něco jde těžko, znamená to, že jdeš tou správnou cestou...

Tomáš123

Člen

Tomáš123:25.7.2016 19:13

Čo potrebuješ urobiť? Tri rovnako široké stĺpce? Ak sa nemusia vzájomne výškovo prispôsobiť, vystačíš si s <code><a href="https://www.jakpsatweb.cz/css/float.html">float</a></code>om. Ak sa vzájomne výškovo prispôsobiť musia, môžeš použiť <a href="http://jecas.cz/display#tabulkove">tabuľkové hodnoty vlastnosti <code>display</code></a>. Ak ti podpora od IE8 vyššie nestačí, ide aj toto <a href="http://jecas.cz/stejne-vysoke-sloupce">riešiť</a> pomerne jednoducho.

Flexbox v tomto prípade nepotrebuješ.

<a href="http://kod.djpw.cz/xaac">Ukážka</a> použitia <code>float</code>u
<a href="http://kod.djpw.cz/yaac">Ukážka</a> použitia tabuľkových hodnôt vlastnosti <code>display</code>

Nahoru Odpovědět

25.7.2016 19:13

Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.

Tomáš123

Člen

Tomáš123:25.7.2016 19:18

<a href="http://kod.djpw.cz/zaac">Ukážka</a> použitia <code>float</code>u a <code><a href="http://jecas.cz/float#clearovani">clear</a></code>u.

Nahoru Odpovědět

25.7.2016 19:18

Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.

Jan Lupčík

Tvůrce

Jan Lupčík:25.7.2016 20:06

Tomáš123: Takže jelikož flexbox je novinka, se kterou se pracuje dobře a dá se s ní dost pohrát, ale moc prohlížečů ho nepodporuje, budeme furt stále používat vlastnosti float. Kritizoval jsi moje manuály a můj článek před rokem kvůli té podpoře a stále obhajuješ to, že podpora je malá. Myslím si, že většina lidí má W10, kde na Edge už snad takové věci fungují. Pokud lidi mají starší systémy, troufám si říci, že budou mít nějakou novější verzi Chromu, Opery, Mozilly Firefox nebo IE (11). Pokud ne, jedná se o celkem zanedbatelné množství lidí. To máš to samé jako s JS - pár lidí ho má vypnuté též.

Takže sdílím názor s VitekST. S flexboxem se dá dobře pohrát a nakonec třeba udělá ještě lepší design.

Nahoru Odpovědět

25.7.2016 20:06

TruckersMP vývojář

Tomáš123

Člen

Tomáš123:26.7.2016 7:44

Flexbox má víc než dost zjevných benefitů

To nepopieram; pýtali ste sa na to, prečo som metódy <a href="www.itnetwork.cz/html-css/diskuzni-forum-webdesign/razeni-elementu-vedle-sebe-57946833e8f85#goto178774">zoradil</a> v takom poradí. Isteže v prípade, keď danou vlastnosťou nejde požadovaný výsledok dosiahnuť, nejde s ňou počítať a rebríčka sa vôbec nezúčastní. Tu si treba vybrať, či na staršie prehliadače kašľať, skriptom zachytiť a kašľať na ne s arogantnou hláškou o nutnosti inovácie, alebo nejako zachytiť a zabezpečiť pre takéhoto užívateľa čo možno najlepší pôžitok za znesiteľnú cenu (používať tabuľkové layouty, nadmerne zväčšovať objemy súborov či pripravovať také stránky, aby sa na nich prakticky nemalo čo pokaziť už je trochu extrém).

Nahoru Odpovědět

26.7.2016 7:44

Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.

Tomáš123

Člen

Tomáš123:26.7.2016 8:09

Jak po oficiální stránce, přes technickou stránku, tak po morální stránce.

Čo po hospodárskej, politickej či právnej stránke?

Nicméně, je tu organizace W3C, které definuje standardy jako je HTML5 a CSS3

Flexbox ešte tak úplne <a href="https://www.w3.org/TR/tr-technology-stds#tr_CSS">nedefinovala</a>. Väčšinu proprietárny „fíčur“ W3C neštandardizuje.

Jestli prohlížeč takovouto specifikaci nepodporuje...

Veď ani nevieš, čo je špecifikáciou aktuálne definované. Ak pre teba toľko znamená, prestaň používať flexbox, kým sa nestane „W3C doporučením“.

Jestliže vývojář prohlížeče nechce svůj prohlížeč přizpůsobovat podle aktuálních standardů, které W3C definuje, tak asi ho zatrhnul, nebo je sám proti sobě.

Ty toho o tom vieš...

Nahoru Odpovědět

26.7.2016 8:09

Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.

Tomáš123

Člen

Tomáš123:26.7.2016 8:16

Takže jelikož flexbox [...] moc prohlížečů nepodporuje, budeme furt stále používat vlastnosti float

Ak to bude postačovať potrebám, áno.

Kritizoval jsi moje manuály a můj článek

Podľa profilu máš iba jeden článok o flexboxe, kde ťa kritizuje <a href="http://www.itnetwork.cz/html-css/responzivni-webdesign/html-css-flexbox-tutorial-tvorba-modernich-layoutu#goto147916">Honza Bittner</a>. Ja som kritizoval tvoje nekvalitné materiály o elemente <code><title></code> a vysúvacom menu (väčšinou z dôvodov nesúvisiacich s podporou).

Myslím si, že většina lidí má W10

Ja si myslím, že nemá.

Nahoru Odpovědět

26.7.2016 8:16

Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.

Jan Lupčík

Tvůrce

Jan Lupčík:26.7.2016 8:42

K prvnímu bodu se už vyjadřovat nebudu. S takovým přístupem můžeme rovnou přestat používat HTML 5.
To se omlouvám, chyba na mé straně. Nicméně to nemění to, že všude, kde chce někdo použít flexbox, hned podstrkáváš starší a zdlouhavější metody místo té jednodušší, rychlejší a modernější.
Myslel jsem prostě nějaké větší % lidí. Samozřejmě se nejedná o nejpoužívanější systém. Přesto má obrovské množství lidí novější verze prohlížečů a to na jakémkoliv systému.

Nahoru Odpovědět

26.7.2016 8:42

TruckersMP vývojář

Nejčastěji vyhledáváné

Diskuze: Řazení elementů vedle sebe