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

Trädvy Permalänk
Medlem
Registrerad
Aug 2011

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)?

Trädvy Permalänk
Medlem
Plats
192.168.0.1
Registrerad
Jul 2007

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.

6700k @ 4.8GHz . 16GB @ 2666MHz . x2 1070 @ 2150/4600
360+240 rad custom loop
Flickr 500px

Trädvy Permalänk
Medlem
Registrerad
Aug 2011
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.

Trädvy Permalänk
Medlem
Plats
Sundsvall
Registrerad
Dec 2006

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

Canon 70D | 2x Dell Ultrasharp 24" | i7 3770k | 16B | GTX 780

Trädvy Permalänk
Medlem
Registrerad
Aug 2011
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).

Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Mar 2015
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/

I'm not having a glass of wine, I'm having six! It's called a tasting and it's classy!

Trädvy Permalänk
Medlem
Plats
Sundsvall
Registrerad
Dec 2006
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.

Canon 70D | 2x Dell Ultrasharp 24" | i7 3770k | 16B | GTX 780

Trädvy Permalänk
Inaktiv
Registrerad
Mar 2010
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?

Trädvy Permalänk
Medlem
Registrerad
Aug 2011
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.

Trädvy Permalänk
Medlem
Plats
Säter
Registrerad
Apr 2005

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.

///

Trädvy Permalänk
Medlem
Plats
192.168.0.1
Registrerad
Jul 2007
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".

6700k @ 4.8GHz . 16GB @ 2666MHz . x2 1070 @ 2150/4600
360+240 rad custom loop
Flickr 500px

Trädvy Permalänk
Medlem
Plats
Summer '79
Registrerad
Maj 2002

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

CPU: Intel Core i7 4770K @ 4.2Ghz Motherboard: Asus Maximus VI Hero GPU: Zotac GeForce GTX 780 AMP Edition Memory: Kingston Beast 16GB @ 2400Mhz SSD: 240GB Intel 530 PSU: Corsair AX 860W 80+ Platinum Chassi: Corsair Obsidian 750D OS: Windows 7 x64 Professional 3Dmark11: 13739 3Dmark Vantage: 42063 Valley Benchmark 1.0 Extreme HD: 3016

Trädvy Permalänk
Medlem
Registrerad
Aug 2011
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,

Trädvy Permalänk
Medlem
Plats
Trollhättan
Registrerad
Jun 2016

Bootstrap?