kan CSS fixa ett sånt här grid av bilder?

Permalänk
Avstängd

kan CSS fixa ett sånt här grid av bilder?

Hej!
Är lite rostig på CSS floats.
Kan man åstadkomma en sån här design enbart med CSS? Tänker speciellt på bild nr.4. Hur får man den att inte fastna under nr.3? Är det genom clear:left? Eller får det den bara att flyta längst till vänster men stanna kvar under 2:ans baslinje och ha massa luft ovanför mot 1:an (vilket den alltså inte ska göra då jag vill att den ska flyta upp mot 1:an och bredvid 2:an)?

Permalänk
Medlem

Har inte hållit på med HTML/CSS på väldigt länge, men som standard kan du ju sätta 3 containers, left, mid, right. I dessa skapar du alltså innehållet.

float: left; / right;.
Sen använder du antingen margin eller padding för att öka distans från innehållet.

Det jag funderar på att du menar är om det ska vara responsiv design? Jag kan inte riktigt tyda på vad du vill det ska göra.

Visa signatur

14700k @ Stock . 32GB @ 4000MHz . 3070 @ +100/+800MHz
240+360 rad custom loop

Permalänk
Avstängd
Skrivet av solomon:

Har inte hållit på med HTML/CSS på väldigt länge, men som standard kan du ju sätta 3 containers, left, mid, right. I dessa skapar du alltså innehållet.

float: left; / right;.
Sen använder du antingen margin eller padding för att öka distans från innehållet.

Det jag funderar på att du menar är om det ska vara responsiv design? Jag kan inte riktigt tyda på vad du vill det ska göra.

Det är precis det som är grejen, det responsiva. Om jag bygger i tre containers, måste jag ha en annan ordning på bilderna i koden: 1,4,7,2,5,3,6 o.s.v... Men när sidan sen går över till "1 bild i bredd" på mobil som vill jag ha inte ha bilderna i den ordningen utan 1,2,3,4,5,6,7.

Permalänk
Medlem

Googla lite på CSS masonry så lär du får en del tips på hur du går tillväga.

Visa signatur

Canon 70D | 2x Dell Ultrasharp 24" | Ryzen 3700X | 32B | GTX 1080Ti

Permalänk
Avstängd
Skrivet av Florrpan:

Googla lite på CSS masonry så lär du får en del tips på hur du går tillväga.

Fast de lösningarna är beroende av CSS3 (antingen flex eller css-columns eller båda tillsammans), så då måste jag ha nån backupdesign för de browsers (typ IE10) som inte stöder CSS3. Kanske enklare då att använda javascript (isotope, för jag vill inte ha random order).

Permalänk
Medlem
Skrivet av pigge_85:

Fast de lösningarna är beroende av CSS3 (antingen flex eller css-columns eller båda tillsammans), så då måste jag ha nån backupdesign för de browsers (typ IE10) som inte stöder CSS3. Kanske enklare då att använda javascript (isotope, för jag vill inte ha random order).

Flexbox fungerar väl med IE10?

https://css-tricks.com/using-flexbox/

Visa signatur

Grubblare

Permalänk
Medlem
Skrivet av pigge_85:

Fast de lösningarna är beroende av CSS3 (antingen flex eller css-columns eller båda tillsammans), så då måste jag ha nån backupdesign för de browsers (typ IE10) som inte stöder CSS3. Kanske enklare då att använda javascript (isotope, för jag vill inte ha random order).

Jag hittade några lösningar som inte använder flexbox. Det finns även flertalet Javascript lösningar färdiga att använda.

Visa signatur

Canon 70D | 2x Dell Ultrasharp 24" | Ryzen 3700X | 32B | GTX 1080Ti

Permalänk
Inaktiv
Skrivet av pigge_85:

Det är precis det som är grejen, det responsiva. Om jag bygger i tre containers, måste jag ha en annan ordning på bilderna i koden: 1,4,7,2,5,3,6 o.s.v... Men när sidan sen går över till "1 bild i bredd" på mobil som vill jag ha inte ha bilderna i den ordningen utan 1,2,3,4,5,6,7.

Varför har du inte bara en annan CSS för mobila devices?

Permalänk
Avstängd
Skrivet av studiox_swe:

Varför har du inte bara en annan CSS för mobila devices?

Jag kommer att ha en annan CSS via breakpoints, men jag vill inte "device-sniffa" för att ändra i DOM på mobila enheter. Det känns både som overkill och dessutom ska man ju inte device-sniffa säger alla.

Eller hade du nåt annat i åtanke?

Annars verkar det som att javascript kanske blir enklast (har inte hittat lösningar som känns tillräckligt bakåtkompatibla, utan vare sig flexbox eller css-columns). Det kanske bara är jag som inte kan läsa caniuse-tabellerna, men jag tycker inte att flexbox är helt användbart i dagsläget utan fallback, och måste jag ha fallback är vi ju tillbaka till ursprungsfrågan. Och stödet för css-columns är ju ännu sämre.

Permalänk
Medlem

En fråga man också kan ställa är: Ska man behöva bekymra sig över gamla webläsare? Det är inte direkt dyrt att uppgradera dem.

Visa signatur

///Arch

Permalänk
Medlem
Skrivet av M3Johan:

En fråga man också kan ställa är: Ska man behöva bekymra sig över gamla webläsare? Det är inte direkt dyrt att uppgradera dem.

Inte dyrt alls. T.om oftast gratis. Men folk gör det inte till samma anledning de inte vill uppgradera t.ex Windows-version. "Varför hålla på att ändra massa när det funkar såhär".

Visa signatur

14700k @ Stock . 32GB @ 4000MHz . 3070 @ +100/+800MHz
240+360 rad custom loop

Permalänk
Musikälskare

http://masonry.desandro.com/

Har använt innan, funkar bra!

Flexbox har väldigt svårt (omöjligt) att klara av detta imo, du behöver logik

Visa signatur

❀ Monitor: ASUS Swift 27" @ 1440p/165Hz ❀ CPU: Ryzen 7700X ❀ Cooling: Corsair H170i ELITE 420mm ❀ GPU: MSI 3080 Ti SUPRIM X ❀ Memory: Corsair 32GB DDR5 Vengeance ❀ Motherboard: ASUS Crosshair X670E Hero ❀ M.2: Samsung 980 Pro ❀ PSU: Corsair HX1200 ❀ Chassi: Corsair 7000X ❀ Time Spy: 19 340

📷 Mina fotografier
🎧 Vad lyssnar du på just nu?

Permalänk
Avstängd
Skrivet av flashen:

http://masonry.desandro.com/

Har använt innan, funkar bra!

Flexbox har väldigt svårt (omöjligt) att klara av detta imo, du behöver logik

"Problemet" med masonry.js är väl att det inte går att forcera någon sort-order, Allt hamna<r huller om buller för att mest effektivt utnyttja tillgängling utrymme. Eller hur?
Det verkar som isotope.js kan bevara ordningen bättre. Jag ska prova över helgen och se om jag får någon rätsida på det,

Permalänk
Medlem

Bootstrap?