8 komentářů k článku Responsivní CSS mřížka:

  1. Jirka

    pevná výška
    Já někdy používám podobné řešení, ale místo obtékání prohlásím ony bloky za něco jako písmena textu (display: inline-block;) a pak výška nemusí být stejná, ale defaultně jsou zase bloky verikálně na řádku zarovnávány na spodní účaří a výška takového řádku je logicky určena nejvyšším blokem. Pro nestejně vysoký obsah (např. galerie s různě dlouhými popisky náhledů) je to ale taky použitelné řešení.

    1. Bohumil JahodaAutor příspěvku

      Re: pevná výška
      U inline-blocku je trochu potíž s bílými znaky.

      Buď vznikne křehký layout, který může rozbít automatické formátování kódu, nebo se bude muset rozbít relativní určování velikosti písma. Či budeme muset oželet přesnou šířku.

      Nebo to nějak řešíte?

      1. David Světlík

        Re: pevná výška
        Rodičovský element dostane „font-size: 0rem“ a bloky pak „font-size: 1rem“.

        Rem se vztahuje relativně k rodičovskému elementu (tj. html), podpora je myslím dobrá dost – http://caniuse.com/#search=rem . Pokud prohlížeč rem nepodporuje, hodnota „0rem“ místo „0“ zajistí, aby se v takovém případě text alespoň nezmenšil na 0.

        1. Bohumil JahodaAutor příspěvku

          Re: pevná výška
          Ani rem neřeší možnost si dědit relativní velikosti písma napříč stránkou. Bloky nebudou mít velikost nezávisle na předchozích rodičích, ale jen na tom <html>.

          Podpora (IE 9+) je samozřejmě k úvaze. Jinak lepší mi asi přijde pro nepodporující prohlížeče hodnotu vynulovat a vrátit než nechat rozpadnout layout.

          Ale je pravda, že pokud má být mřížka s proměnlivou výškou a responsivní a nechceme používat JavaScript, tak asi lépe podporované řešení neexistuje.

  2. Marťas

    table-cell
    Při nutnosti stejné výšky není špatně řešení použít display: table-cell, ale to už je na každém :)

    1. Bohumil JahodaAutor příspěvku

      Re: table-cell
      Obávám se, že table-cell je v tomto případě úplně k ničemu, protože jednotlivé table-celly se vám nebudou řadit pod sebe, ale vytvoří jeden jediný řádek.

      Nebo to nějak řešíte?

Napsat komentář

Tato diskuse je již příliš stará, pravděpodobně již vám nikdo neodpoví. Pokud se chcete na něco zeptat, použijte diskusní server Devel.cz

Zdroj: https://www.zdrojak.cz/?p=13550