Kolonner er en rar ting, men ikke uden typografiske problemer. Man kan ikke helt undgå risiko for horeunger og korte udgangslinjer. Dertil om der er luft i starten af hver kolonne eller ej. Rezise browseren for at se problematikkerne.
Mere info:
http://www.w3schools.com/css/css3_multiple_columns.asp
https://css-tricks.com/almanac/properties/c/columns/
https://css-tricks.com/almanac/properties/b/break-inside/
Eks. 1.
Egenskaben columns er sat på "section" – den hvide boks. Et problem er at de tre spalter ikke starter samme sted, da p tag har margin over sig, som forekommer i 1. afsnit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate iaculis massa eu lobortis. Duis vulputate aliquet augue, ultrices elementum erat ornare sit amet. Ut pretium elit sit amet est laoreet, sit amet dapibus felis tristique. Vivamus elit elit, condimentum ac nisl id, placerat aliquet ex. Pellentesque a odio sit amet lorem vulputate mattis et ac sem. Pellentesque eget blandit turpis. Cras pellentesque libero non faucibus condimentum. Donec ut lorem eu nulla scelerisque consequat. Aliquam mauris ligula, porta euismod scelerisque quis, tincidunt sit amet leo. Pellentesque tincidunt, risus nec pharetra feugiat, felis libero consequat massa, eu molestie justo nisi quis velit. Sed viverra dolor sit amet mauris cursus consectetur. Donec fermentum ex in mattis congue.
Etiam eleifend ut nisl et pulvinar. Pellentesque elementum libero a metus aliquet, sit amet fringilla libero porta. Donec pellentesque, odio sit amet scelerisque molestie, lacus dolor viverra ligula, et condimentum sapien felis non enim. Morbi efficitur, quam quis pharetra sagittis, orci nisl commodo sapien, eu fermentum tellus arcu id lectus. Morbi tincidunt, libero vel condimentum sollicitudin, sapien enim mattis ligula, quis dignissim ante purus nec massa. Suspendisse bibendum justo vitae dui vulputate eleifend. Ut eu erat a ante maximus molestie at in nunc. Morbi at cursus lectus. Praesent vulputate, mi sit amet viverra consequat, tortor elit fringilla mauris, sagittis gravida metus metus a mauris. Ut vestibulum urna accumsan velit laoreet tristique. Duis finibus arcu eu molestie bibendum. Maecenas vestibulum consectetur varius. Etiam blandit leo mauris, id venenatis velit molestie id. Phasellus et fringilla nisl. Nullam id molestie odio. Pellentesque laoreet metus odio, nec finibus erat molestie eget.
Sed sollicitudin, urna in accumsan vulputate, augue mauris tincidunt mauris, pulvinar aliquet eros metus faucibus elit. Duis sit amet turpis sit amet orci condimentum scelerisque et ac justo. Donec rhoncus finibus feugiat. Donec maximus laoreet condimentum. Sed ultrices congue odio nec venenatis. Morbi nunc turpis, bibendum ac purus sed, feugiat egestas augue. Fusce eget elit vestibulum, commodo elit et, varius ante.
Donec vitae orci eros. Praesent maximus, purus sed pellentesque volutpat, tortor massa convallis nibh, in scelerisque magna ligula in orci. Fusce fringilla mattis leo, sed consectetur eros suscipit at. Cras fermentum erat dolor, eget sollicitudin dui hendrerit vitae. Nullam vestibulum eros non hendrerit cursus. Sed viverra massa tincidunt ultricies tincidunt. Donec ac tellus ac lectus condimentum pharetra. Nam tincidunt posuere mi nec placerat. Proin nisi nisi, dignissim at vestibulum nec, rhoncus vitae lacus. Vestibulum blandit nunc elit, eget sodales eros placerat eget. Etiam convallis vitae ex at sollicitudin. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas orci neque, accumsan eget ante nec, suscipit ultrices ex. Aliquam in turpis venenatis, pretium sapien efficitur, maximus nibh. Quisque dictum, mauris ut ultrices blandit, lacus nunc condimentum nunc, eget pellentesque sapien nibh a metus.
Nunc risus elit, imperdiet et elit sit amet, rutrum fermentum tellus. Vestibulum accumsan vulputate ipsum, quis commodo dolor sagittis non. Suspendisse ullamcorper ultrices lorem sed pellentesque. Duis fringilla, urna quis accumsan porta, felis est iaculis nibh, in bibendum tortor erat eu est. Ut sodales nisl urna, eu pulvinar lectus convallis sodales. Aenean accumsan lorem non vulputate rhoncus. Nullam rutrum pulvinar vulputate. In ultrices dapibus lobortis. Phasellus dapibus mattis mauris non porta.
Eks. 2.
p er sat med margin-top: 0 og margin-bottom: 1.2 rem (det samme som skydningen, medvirker til at holde register). Til gengæld kan der komme problemer når spalten slutter med et afsnit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate iaculis massa eu lobortis. Duis vulputate aliquet augue, ultrices elementum erat ornare sit amet. Ut pretium elit sit amet est laoreet, sit amet dapibus felis tristique. Vivamus elit elit, condimentum ac nisl id, placerat aliquet ex. Pellentesque a odio sit amet lorem vulputate mattis et ac sem. Pellentesque eget blandit turpis. Cras pellentesque libero non faucibus condimentum. Donec ut lorem eu nulla scelerisque consequat.
Aliquam mauris ligula, porta euismod scelerisque quis, tincidunt sit amet leo.
Pellentesque tincidunt, risus nec pharetra feugiat, felis libero consequat massa, eu molestie justo nisi quis velit. Sed viverra dolor sit amet mauris cursus consectetur. Donec fermentum ex in mattis congue.
Etiam eleifend ut nisl et pulvinar. Pellentesque elementum libero a metus aliquet, sit amet fringilla libero porta. Donec pellentesque, odio sit amet scelerisque molestie, lacus dolor viverra ligula, et condimentum sapien felis non enim.
Morbi efficitur, quam quis pharetra sagittis, orci nisl commodo sapien, eu fermentum tellus arcu id lectus. Morbi tincidunt, libero vel condimentum sollicitudin, sapien enim mattis ligula, quis dignissim ante purus nec massa. Suspendisse bibendum justo vitae dui vulputate eleifend. Ut eu erat a ante maximus molestie at in nunc. Morbi at cursus lectus.
Praesent vulputate, mi sit amet viverra consequat, tortor elit fringilla mauris, sagittis gravida metus metus a mauris. Ut vestibulum urna accumsan velit laoreet tristique. Duis finibus arcu eu molestie bibendum. Maecenas vestibulum consectetur varius. Etiam blandit leo mauris, id venenatis velit molestie id. Phasellus et fringilla nisl. Nullam id molestie odio. Pellentesque laoreet metus odio, nec finibus erat molestie eget.
Sed sollicitudin, urna in accumsan vulputate, augue mauris tincidunt mauris, pulvinar aliquet eros metus faucibus elit. Duis sit amet turpis sit amet orci condimentum scelerisque et ac justo. Donec rhoncus finibus feugiat.
Donec maximus laoreet condimentum.
Sed ultrices congue odio nec venenatis. Morbi nunc turpis, bibendum ac purus sed, feugiat egestas augue. Fusce eget elit vestibulum, commodo elit et, varius ante.
Donec vitae orci eros. Praesent maximus, purus sed pellentesque volutpat, tortor massa convallis nibh, in scelerisque magna ligula in orci. Fusce fringilla mattis leo, sed consectetur eros suscipit at. Cras fermentum erat dolor, eget sollicitudin dui hendrerit vitae. Nullam vestibulum eros non hendrerit cursus.
Sed viverra massa tincidunt ultricies tincidunt. Donec ac tellus ac lectus condimentum pharetra. Nam tincidunt posuere mi nec placerat. Proin nisi nisi, dignissim at vestibulum nec, rhoncus vitae lacus. Vestibulum blandit nunc elit, eget sodales eros placerat eget. Etiam convallis vitae ex at sollicitudin. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Maecenas orci neque, accumsan eget ante nec, suscipit ultrices ex. Aliquam in turpis venenatis, pretium sapien efficitur, maximus nibh. Quisque dictum, mauris ut ultrices blandit, lacus nunc condimentum nunc, eget pellentesque sapien nibh a metus.
Nunc risus elit, imperdiet et elit sit amet, rutrum fermentum tellus. Vestibulum accumsan vulputate ipsum, quis commodo dolor sagittis non.
Suspendisse ullamcorper ultrices lorem sed pellentesque. Duis fringilla, urna quis accumsan porta, felis est iaculis nibh, in bibendum tortor erat eu est. Ut sodales nisl urna, eu pulvinar lectus convallis sodales.
Aenean accumsan lorem non vulputate rhoncus. Nullam rutrum pulvinar vulputate. In ultrices dapibus lobortis. Phasellus dapibus mattis mauris non porta.
Eks. 3.
section p:firstchild har fået margin-top:0. Resten er default. Nok det bedste bud, men der kan stadig opstå problemer
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate iaculis massa eu lobortis. Duis vulputate aliquet augue, ultrices elementum erat ornare sit amet. Ut pretium elit sit amet est laoreet, sit amet dapibus felis tristique. Vivamus elit elit, condimentum ac nisl id, placerat aliquet ex. Pellentesque a odio sit amet lorem vulputate mattis et ac sem. Pellentesque eget blandit turpis. Cras pellentesque libero non faucibus condimentum. Donec ut lorem eu nulla scelerisque consequat.
Aliquam mauris ligula, porta euismod scelerisque quis, tincidunt sit amet leo.
Pellentesque tincidunt, risus nec pharetra feugiat, felis libero consequat massa, eu molestie justo nisi quis velit. Sed viverra dolor sit amet mauris cursus consectetur. Donec fermentum ex in mattis congue.
Etiam eleifend ut nisl et pulvinar. Pellentesque elementum libero a metus aliquet, sit amet fringilla libero porta. Donec pellentesque, odio sit amet scelerisque molestie, lacus dolor viverra ligula, et condimentum sapien felis non enim. Morbi efficitur, quam quis pharetra sagittis, orci nisl commodo sapien, eu fermentum tellus arcu id lectus. Morbi tincidunt, libero vel condimentum sollicitudin, sapien enim mattis ligula, quis dignissim ante purus nec massa. Suspendisse bibendum justo vitae dui vulputate eleifend. Ut eu erat a ante maximus molestie at in nunc. Morbi at cursus lectus.
Praesent vulputate, mi sit amet viverra consequat, tortor elit fringilla mauris, sagittis gravida metus metus a mauris. Ut vestibulum urna accumsan velit laoreet tristique. Duis finibus arcu eu molestie bibendum. Maecenas vestibulum consectetur varius. Etiam blandit leo mauris, id venenatis velit molestie id. Phasellus et fringilla nisl. Nullam id molestie odio. Pellentesque laoreet metus odio, nec finibus erat molestie eget.
Sed sollicitudin, urna in accumsan vulputate, augue mauris tincidunt mauris, pulvinar aliquet eros metus faucibus elit. Duis sit amet turpis sit amet orci condimentum scelerisque et ac justo. Donec rhoncus finibus feugiat. Donec maximus laoreet condimentum.
Sed ultrices congue odio nec venenatis. Morbi nunc turpis, bibendum ac purus sed, feugiat egestas augue. Fusce eget elit vestibulum, commodo elit et, varius ante.
Donec vitae orci eros. Praesent maximus, purus sed pellentesque volutpat, tortor massa convallis nibh, in scelerisque magna ligula in orci. Fusce fringilla mattis leo, sed consectetur eros suscipit at. Cras fermentum erat dolor, eget sollicitudin dui hendrerit vitae. Nullam vestibulum eros non hendrerit cursus. Sed viverra massa tincidunt ultricies tincidunt. Donec ac tellus ac lectus condimentum pharetra. Nam tincidunt posuere mi nec placerat. Proin nisi nisi, dignissim at vestibulum nec, rhoncus vitae lacus. Vestibulum blandit nunc elit, eget sodales eros placerat eget. Etiam convallis vitae ex at sollicitudin.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Maecenas orci neque, accumsan eget ante nec, suscipit ultrices ex. Aliquam in turpis venenatis, pretium sapien efficitur, maximus nibh. Quisque dictum, mauris ut ultrices blandit, lacus nunc condimentum nunc, eget pellentesque sapien nibh a metus.
Nunc risus elit, imperdiet et elit sit amet, rutrum fermentum tellus. Vestibulum accumsan vulputate ipsum, quis commodo dolor sagittis non. Suspendisse ullamcorper ultrices lorem sed pellentesque. Duis fringilla, urna quis accumsan porta, felis est iaculis nibh, in bibendum tortor erat eu est.
Ut sodales nisl urna, eu pulvinar lectus convallis sodales.
Aenean accumsan lorem non vulputate rhoncus. Nullam rutrum pulvinar vulputate. In ultrices dapibus lobortis. Phasellus dapibus mattis mauris non porta.
Eks. 4.
Break-inside: avoid; på p. Dvs. p ikke må deles, hvilket kræver at afsnit er forholdsvis korte. Der er default margin på p.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate iaculis massa eu lobortis. Duis vulputate aliquet augue, ultrices elementum erat ornare sit amet. Ut pretium elit sit amet est laoreet, sit amet dapibus felis tristique. Vivamus elit elit, condimentum ac nisl id, placerat aliquet ex. Pellentesque a odio sit amet lorem vulputate mattis et ac sem. Pellentesque eget blandit turpis. Cras pellentesque libero non faucibus condimentum. Donec ut lorem eu nulla scelerisque consequat.
Aliquam mauris ligula, porta euismod scelerisque quis, tincidunt sit amet leo.
Pellentesque tincidunt, risus nec pharetra feugiat, felis libero consequat massa, eu molestie justo nisi quis velit. Sed viverra dolor sit amet mauris cursus consectetur. Donec fermentum ex in mattis congue.
Etiam eleifend ut nisl et pulvinar. Pellentesque elementum libero a metus aliquet, sit amet fringilla libero porta. Donec pellentesque, odio sit amet scelerisque molestie, lacus dolor viverra ligula, et condimentum sapien felis non enim. Morbi efficitur, quam quis pharetra sagittis, orci nisl commodo sapien, eu fermentum tellus arcu id lectus. Morbi tincidunt, libero vel condimentum sollicitudin, sapien enim mattis ligula, quis dignissim ante purus nec massa. Suspendisse bibendum justo vitae dui vulputate eleifend. Ut eu erat a ante maximus molestie at in nunc. Morbi at cursus lectus.
Praesent vulputate, mi sit amet viverra consequat, tortor elit fringilla mauris, sagittis gravida metus metus a mauris. Ut vestibulum urna accumsan velit laoreet tristique. Duis finibus arcu eu molestie bibendum. Maecenas vestibulum consectetur varius. Etiam blandit leo mauris, id venenatis velit molestie id. Phasellus et fringilla nisl. Nullam id molestie odio. Pellentesque laoreet metus odio, nec finibus erat molestie eget.
Sed sollicitudin, urna in accumsan vulputate, augue mauris tincidunt mauris, pulvinar aliquet eros metus faucibus elit. Duis sit amet turpis sit amet orci condimentum scelerisque et ac justo. Donec rhoncus finibus feugiat. Donec maximus laoreet condimentum.
Sed ultrices congue odio nec venenatis. Morbi nunc turpis, bibendum ac purus sed, feugiat egestas augue. Fusce eget elit vestibulum, commodo elit et, varius ante.
Donec vitae orci eros. Praesent maximus, purus sed pellentesque volutpat, tortor massa convallis nibh, in scelerisque magna ligula in orci. Fusce fringilla mattis leo, sed consectetur eros suscipit at. Cras fermentum erat dolor, eget sollicitudin dui hendrerit vitae. Nullam vestibulum eros non hendrerit cursus. Sed viverra massa tincidunt ultricies tincidunt. Donec ac tellus ac lectus condimentum pharetra. Nam tincidunt posuere mi nec placerat. Proin nisi nisi, dignissim at vestibulum nec, rhoncus vitae lacus. Vestibulum blandit nunc elit, eget sodales eros placerat eget. Etiam convallis vitae ex at sollicitudin.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Maecenas orci neque, accumsan eget ante nec, suscipit ultrices ex. Aliquam in turpis venenatis, pretium sapien efficitur, maximus nibh. Quisque dictum, mauris ut ultrices blandit, lacus nunc condimentum nunc, eget pellentesque sapien nibh a metus.
Nunc risus elit, imperdiet et elit sit amet, rutrum fermentum tellus. Vestibulum accumsan vulputate ipsum, quis commodo dolor sagittis non. Suspendisse ullamcorper ultrices lorem sed pellentesque. Duis fringilla, urna quis accumsan porta, felis est iaculis nibh, in bibendum tortor erat eu est.
Ut sodales nisl urna, eu pulvinar lectus convallis sodales.
Aenean accumsan lorem non vulputate rhoncus. Nullam rutrum pulvinar vulputate. In ultrices dapibus lobortis. Phasellus dapibus mattis mauris non porta.
Eks. 5.
Her fungerer det, men ikke lavet med ren css. Der er sat hårdt linjeskift ind i slutningen af hvert afsnit, og margin på p er sat til 0. Dertil break-inside: avoid; på p. Dvs. p ikke må deles, hvilket kræver at afsnit er forholdsvis korte.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate iaculis massa eu lobortis. Duis vulputate aliquet augue, ultrices elementum erat ornare sit amet. Ut pretium elit sit amet est laoreet, sit amet dapibus felis tristique.
Vivamus elit elit, condimentum ac nisl id, placerat aliquet ex. Pellentesque a odio sit amet lorem vulputate mattis et ac sem. Pellentesque eget blandit turpis. Cras pellentesque libero non faucibus condimentum. Donec ut lorem eu nulla scelerisque consequat.
Aliquam mauris ligula, porta euismod scelerisque quis, tincidunt sit amet leo.
Pellentesque tincidunt, risus nec pharetra feugiat, felis libero consequat massa, eu molestie justo nisi quis velit. Sed viverra dolor sit amet mauris cursus consectetur. Donec fermentum ex in mattis congue.
Etiam eleifend ut nisl et pulvinar. Pellentesque elementum libero a metus aliquet, sit amet fringilla libero porta. Donec pellentesque, odio sit amet scelerisque molestie, lacus dolor viverra ligula, et condimentum sapien felis non enim. Morbi efficitur, quam quis pharetra sagittis, orci nisl commodo sapien, eu fermentum tellus arcu id lectus.
Morbi tincidunt, libero vel condimentum sollicitudin, sapien enim mattis ligula, quis dignissim ante purus nec massa. Suspendisse bibendum justo vitae dui vulputate eleifend. Ut eu erat a ante maximus molestie at in nunc. Morbi at cursus lectus.
Praesent vulputate, mi sit amet viverra consequat, tortor elit fringilla mauris, sagittis gravida metus metus a mauris. Ut vestibulum urna accumsan velit laoreet tristique.
Etiam blandit leo mauris, id venenatis velit molestie id.
Phasellus et fringilla nisl. Nullam id molestie odio. Pellentesque laoreet metus odio, nec finibus erat molestie eget.
Sed sollicitudin, urna in accumsan vulputate, augue mauris tincidunt mauris, pulvinar aliquet eros metus faucibus elit. Duis sit amet turpis sit amet orci condimentum scelerisque et ac justo.
Donec rhoncus finibus feugiat. Donec maximus laoreet condimentum.
Sed ultrices congue odio nec venenatis.
Morbi nunc turpis, bibendum ac purus sed, feugiat egestas augue. Fusce eget elit vestibulum, commodo elit et, varius ante.
Donec vitae orci eros. Praesent maximus, purus sed pellentesque volutpat, tortor massa convallis nibh, in scelerisque magna ligula in orci.
Fusce fringilla mattis leo, sed consectetur eros suscipit at. Cras fermentum erat dolor, eget sollicitudin dui hendrerit vitae.
Nullam vestibulum eros non hendrerit cursus. Sed viverra massa tincidunt ultricies tincidunt. Donec ac tellus ac lectus condimentum pharetra.
Nam tincidunt posuere mi nec placerat. Proin nisi nisi, dignissim at vestibulum nec, rhoncus vitae lacus.
Vestibulum blandit nunc elit, eget sodales eros placerat eget. Etiam convallis vitae ex at sollicitudin.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Maecenas orci neque, accumsan eget ante nec, suscipit ultrices ex.
Aliquam in turpis venenatis, pretium sapien efficitur, maximus nibh. Quisque dictum, mauris ut ultrices blandit, lacus nunc condimentum nunc, eget pellentesque sapien nibh a metus.
Nunc risus elit, imperdiet et elit sit amet, rutrum fermentum tellus. Vestibulum accumsan vulputate ipsum, quis commodo dolor sagittis non. Suspendisse ullamcorper ultrices lorem sed pellentesque. Duis fringilla, urna quis accumsan porta, felis est iaculis nibh, in bibendum tortor erat eu est.
Ut sodales nisl urna, eu pulvinar lectus convallis sodales.
Aenean accumsan lorem non vulputate rhoncus. Nullam rutrum pulvinar vulputate. In ultrices dapibus lobortis. Phasellus dapibus mattis mauris non porta.