Rask Tips Multi-Column CSS3-modulen

I over seks år har CSS3 kolonner vært tilgjengelige for oss; ennå, merkelig, de er sjelden utnyttet. Fordi de for tiden bare støttes i Mozilla og Webkit-baserte nettlesere, betyr dette at - igjen - ingen støtte i Internet Explorer. Men det er greit! Verden vil ikke ende hvis IE-brukere ser ett lengre avsnitt. Jeg skal vise deg hvordan du bruker denne hjelpsomme modulen i dagens videosnabbtips.


Abonner på vår YouTube-side for å se alle videoopplæringene!

Foretrekker å se denne videoen på Screenr?

 #container p -webkit-kolonne-telling: 3; -webkit-kolonne-gapet: 10px; -moz-kolonne-telling: 3; -moz-kolonne-gapet: 10px; kolonne telling: 3; kolonneavstand: 10px; 

  • kolonne-count: Ønsket antall kolonner for elementet.
  • kolonne-gap: Polstringen mellom hver kolonne.
  • kolonne-regelen: Divider for hver kolonne; kan brukes til å spesifisere en ramme.
  • kolonnebredde: Brukes til spesifikt å angi bredden på hver kolonne.

Vær oppmerksom på at vi må prefikse hver eiendom med -webkit eller -moz, tilsvarende; så: -webkit-kolonne-telling.

Bruker du CSS-kolonner i prosjektene dine? Hvis nei, hvorfor ikke?