Autor Zpráva
andynewcastleth
Profil
Jaký by byl správný (resp. nejlepší) způsob, jak v CSS udělat mezery mezi fotkami ve fotogalerii? (šířka 100% natahovací, obrysové mezery galerie žádné, ideálně primitivním zápisem IMGs uvnitř DIVu)




    <div class="fotogalerie">
        <img src="38.jpg">
        <img src="38.jpg">
        <img src="38.jpg">
        <img src="38.jpg">
        <img src="38.jpg">
        <img src="38.jpg">
    </div>
RastyAmateur
Profil
andynewcastleth:
Každý <img> dej do divu a nastav mu padding. Nejlépe se s tím pak počítá a pracuje, z mého pohledu.
Tomášeek
Profil
RastyAmateur:
Každý <img> dej do divu a nastav mu padding
Eh?

andynewcastleth:
Existuje samozřejmě flexbox, případně to jde udělat i bez něj za pomoci sourozenechých selektorů v kombinaci s :nth-child, pokud bys potřeboval podporu pro IE9 z nějakého důvodu.
RastyAmateur
Profil
Tomášeek:
<style>
  .fotogalerie > div {
    display: block;
    width: calc(100% / 3);
    padding: 3px;
    box-sizing: border-box;
  }
  
  .fotogalerie img {
    display: block;
    width: 100%;
  }
</style>

<div class="fotogalerie">
        <div>
            <img src="38.jpg">
        </div>
        <div>
            <img src="38.jpg">
        </div>
        <div>
            <img src="38.jpg">
        </div>
</div>
Nějak nevím, jestli zadání/dotaz nechápu já či ty...
Tomášeek
Profil
RastyAmateur:
Tvoje řešení má odsazení zleva u první, zprava u poslední v divu.

Nee, tudy cesta fakt nevede. Navíc obalovat každý obrázek je fakt špatně, a to i když pomíjím flexbox a měl bych si vystačit s letitými nástroji. Ten tvůj div s paddingem akorát supluje margin na obrázku.
TomasJ
Profil
RastyAmateur:
Rozhodně bych nepoužíval calc pro statické hodnoty. Je celkem pomalý a v dnešní době je hodně tendence dělat webové aplikace pouštěné na TV (ne všechny používají moderní jádro pro zobrazování html). Dá se použít vypočítaná hodnota 33.34%. Tenhle problém s kompatibilitou tedy nastává i u použití flexboxu. PS: <div> je tam opravdu zbytečný a špiní DOM. Vyřešit se to dá jednoduše bez nich.

andynewcastleth:
Přikláním se k radě využít selektor, kterou tu zmínil Tomášeek, avšak zvolil bych raději :first-child, :last-child. Pak záleží na tobě, jestli nastavíš všem obrázkům margin odpovídající požadované mezeře zleva (na :first-child bys aplikoval margin-left: 0), zprava (:last-child by musel mít nastavený margin-right: 0), nebo jestli nastavíš polovinu požadované mezery jak zleva, tak i zprava (to bys potom musel nastavit margin 0 zleva prvnímu a margin 0 zprava poslednímu elementu).
andynewcastleth
Profil
RastyAmateur, Tomášeek, TomasJ:


- Flexbox mi připadá, že řeší jen responsivitu. Ne okraje odstranění vnějších okrajů a odstranění vnitřních dvojitých okrajů.

- Pokud by jsem chtěl používat CSS selektory, tak by jsem musel každý řádek obalit do DIVu? A navíc řešit generování řádkových DIVů v PHP. Což jsem hledal, jestli existuje lepší řešení... .
Bubák
Profil
Pokud to bude fotogalerie, tak s pravděpodobností hraničící s jistotou mám za to, že obrázky budou v odkazech a lze je využít coby obalového elementu.
andynewcastleth
Profil
Nakonec jsem to vyřešil CSS selektorem.

Pokud by má galerie měla 3 fotky na řádek, tak vyberu 2. 5. 8. a 11. fotku (ty prostřední) pomocí:

:nth-child(3n+2)
RastyAmateur
Profil
Tomášeek:
Tvoje řešení má odsazení zleva u první, zprava u poslední v divu.
Tak to už se dá přeci vyřešit snadno, ne?

TomasJ:
Rozhodně bych nepoužíval calc pro statické hodnoty.
Ono mi šlo spíš o to, že si takto prohlížeč sám dopočítá nejlepší maximální šířku. Když tam dáš těch tvých 33.34, tak se to občas může zaokrouhlit pěkně na nic a přeteče ti to.
<div> tam až tak zbytečný není, dá se pomocí něj dodělat spoustu dalších věcí, efektů a podobně. Že by špinil DOM, tos mě rozesmál, věřím tomu, že až taková špína to není. Asi na každé stránce se najdou mnohem mnohem horší věci. Vyřešit se to opravdu dá i bez nich, ale pak naopak ta CSSka budou špinavější (viz :nth-child(3n+2), když to vidíš, už musíš dost přemýšlet, co to vlastně je). Navíc jak píše Bubák, mohou to být odkazy...

Já nevím, asi jsem natvrdlý, ale jak sakra chcete pomocí marginu udělat požadované mezery u responzivní galerie, navíc když nechcete použít calc()? Pokud dáte fotce např. width: 25% a pak ještě některým fotkám margin: 0 5px 0 5px, tak to prostě fungovat nebude. Nehledě na to, že ty sousedící marginy se nesčítají, takže je pak docela sranda to ve složitějších případech dorovnat.
Tomášeek
Profil
RastyAmateur, andynewcastleth:
Pokud se bavíme o 4 fotkách na řádek, jde to "postaru" třeba takto. Počítám, že mám jen obrázky bez obalu. Pokud by byl obrázek obalen odkazem, ve stylech budou a místo img.

img {float: left; margin-left: 1%; width: 24.25%}

/* vynulujeme levy margin prvnm polozkam v radku */
/* clear pro pripad, ze by byly ruzne vysky obrazku a rozbila se mrizka */
img:nth-child(4n+1) {margin-left: 0; clear: left;} 

/* pridame horni odsazeni druhe a dalsi rade obrazku */
img:nth-child(4) ~ img {margin-top: 1%}

Živá ukázka

Pro 3, případně 2 fotky na nižších rozlišeních to pak bude analogicky s upravenými selektory.

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:

0