Autor | Zpráva | ||
---|---|---|---|
andynewcastleth Profil |
#1 · Zasláno: 17. 1. 2020, 10:46:50
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 |
#2 · Zasláno: 17. 1. 2020, 23:40:12
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 |
#3 · Zasláno: 18. 1. 2020, 00:01:44
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 |
#4 · Zasláno: 18. 1. 2020, 00:15:19
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> |
||
Tomášeek Profil |
#5 · Zasláno: 18. 1. 2020, 00:21:34
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 |
#7 · Zasláno: 18. 1. 2020, 03:21:48
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 |
#8 · Zasláno: 18. 1. 2020, 04:55:43
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 |
#9 · Zasláno: 18. 1. 2020, 07:35:56
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 |
#10 · Zasláno: 18. 1. 2020, 10:12:23
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. |
||
Časová prodleva: 4 roky
|
0