webForumDet fria alternativet

Hur gör jag en responsiv html/css lista?

1 svar · 632 visningar · startad av xtreme

xtremeMedlem sedan juli 20002 056 inlägg
#1

Vill göra en responsiv html/css lista som fungerar så här:

Om hela listan får plats i fönstret ser den ut så här (där a, b, c är olika ord):

aaaaaa            bbb                    cccccc
aaaa               bbbbbbbb            ccccccccc
aa                  bbbbbb               ccccc
aaaaaaa          bbb                    ccc

I mitt exempel ovan blir inte kolumnerna raka i vänstermarginalen vilket de såklart ska vara! Om webbläsarfönstret minskas så att ccc…. inte får plats hamnar det under aaa…. om inte bbb…. och ccc… får plats på skärmen hamnar kolumnerna på rad under varandra.

Har provat att lägga kolumnerna a, b och c i vars en div med padding right. Resultatet blir att om inte kolumnen c får plats hamnar alla tre kolumnerna under varandra direkt. Det är inte bara kolumnen c som hoppar ner. Har även provat med horisontella listor men får då inte jämna kolumner på grund av att orden är olika långa.

GildebrandMedlem sedan juni 2009920 inlägg
#2

Containern som alla ligger i bör ha max-width istället för width. På så sätt anpassas den bredden. Kolumnerna ska ha relative position och float: left, på så vis kommer de hoppa ner om de inte får plats.

134 ms totalt · 3 externa anrop · v20260731065814-full.0e50b1ef
131 ms — hämta forumlista (db)
0 ms — hämta statistik (cache)
128 ms — hämta tråd, inlägg och bilagor (db)