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.
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.
