Kuinka käyttää CSS3-sarakkeita

Monimutkaisten monitorikokojen moninaisuuden vuoksi ei ole käytännöllistä suunnitella yksittäisiä tekstiruutuja, jotka ottavat koko näytön leveyden. Perinteinen ratkaisu on jakaa tekstiä sarakkeisiin manuaalisesti, mikä on hyvin aikaa intensiivistä; tai jakaa tekstiä dynaamisesti JavaScriptin avulla, joka ei toimi yleisesti. Lisäksi tämä on esitystapa, meidän pitäisi pystyä muokkaamaan sitä CSS: llä ilman grid-järjestelmiä tai kellukkeita, eikö meidän pitäisi?

CSS3 tosiasiallisesti tarjoaa keinon muotoillaksesi tekstisi eri sarakkeisiin, se antaa jopa mahdollisuuden asettaa kouru - välilyönti näiden sarakkeiden välillä - tällä tavoin sinulla on täysi hallinta sen sijaan, että kehys tai ristikkojärjestelmä asettaisi ne puutteet sinulle .

Mikä parasta, CSS3 heikkenee gracefully, joten jos joku selviää Netscape Navigatorissa, sivustosi ei hajoa.

Selaintuki

On tärkeää huomata, että vaikka kaikki nykyiset selaimet tukevat monta saraketta CSS3: ssä - kyllä ​​jopa IE10 - monet viimeaikaiset versiot - esimerkiksi IE9 - eivät. Vaikka tuki on hyvä, sinun kannattaa sisällyttää selaimen etuliitteet webkit (-webkit-) ja mozilla (-moz-). Ei ole tarvetta sisällyttää -ms- tai -o- IE ja Opera, koska ne tukevat ominaisuutta kokonaan tai ei lainkaan.

Ominaisuudet

Tämä CSS-ominaisuus antaa sinulle kourallisen ominaisuuksia, jotka antavat sinulle täyden määräysvallan siitä, miten sisältösi tulostetaan selaimessa, ja nämä ominaisuudet ovat:

• sarakemäärät: tässä määrität elementtien kohdalle sarakkeiden määrän.
• sarake-leveys: yhden sarakkeen leveys. Huomaa, että selaimen todennäköisesti tämä arvo muuttuu.
• sarake-rako: sarakkeiden välisen kuilun leveys.
• sarake-sääntö-leveys: sääntö-osa on eräänlainen reunus sarakkeille ja tässä määrität kyseisen rajan leveyden.
• sarake-sääntö-tyyli: pidä myös rajaa, jos haluat määrittää tyylin.
• sarake-rule-color: tässä säännön väri .
• sarake-span: arvo tässä kertoo selaimelle, kuinka monta saraketta haluat elementin span, tämä on hyvä otsikoihin ja toimii kuten colspan ja rowspan taulukoissa.

Kaikilla näillä ominaisuuksilla ei mielestäni tarvitsisi mitään muuta, jotta voimme valvoa täysin sarakkeitamme. Tietenkään kaikki nämä ominaisuudet eivät ole välttämättömiä monipolvin asettelun toimimiseksi, tosiasiassa vain sarakemäärät ovat välttämättömiä, mutta käytä aina myös sarake-aukkoa, jos haluat tekstille pienen huoneen, eikä siinä ole kaikkia sarakkeita päällekkäin.

Tämän käytännön toteuttamiseen tarvitaan vain kaksi riviä koodia:

/* This will produce a 3 column layout with a gap of 20px between each column */.cols3 {column-count: 3;column-gap: 20px;}

Jos haluat myös soveltaa sääntöä sarakkeisiin, lisää vain lisäominaisuudet:

/* This will produce a 3 column layout and a gap of 20px between each column and a rule of 1px solid black */.cols3 {column-count: 3;column-gap: 20px;column-rule-width: 1px;column-rule-style: solid;column-rule-color: #000;}

Kuten yleisempiä raja-arvoja, voit myös pinota värin, tyylin ja leveyden samalla rivillä:

.cols3 {column-count: 3;column-gap: 20px;column-rule: 1px solid #000;}

Jos sinulla on otsikko ja haluat tämän otsikon kulkevan kaikki sarakkeet, voit lisätä vain yhden rivin:

/*This h1 will take up the space of the 3 columns*/.cols3 h1{column-span: all;}

esittely

Voit käyttää tätä lähes mihin tahansa HTML-muotoon, yhdestä kappaleesta useaan kertaan