Keskustelu: Nettisivujen teko: CSS: Kolme laatikkoa vierekkäin

Osittain jatkoa aiheelle https://www.ohjelmointiputka.net/keskustelu/26880-boksit-vierekkäin/sivu-1.

Kertokaa nyt joku, miten saan kolme laatikkoa vierekkäin, kuten vaikkapa tällä sivulla: http://www.ubuntu.com/ (otsikot "Ubuntu Phone and tablet", "What is Ubuntu" ja "Fast, free and raring to go"). Aiemmin käyttämäni table-cell ei skaalaudu kunnolla näyttökoon pienetessä.

Mielellään ihan koodimerkkiä, kun en saa toimimaan... Viimeksi ei tullut ihan lopullista ratkaisua, eikö CSS pysty vastaamaan tähän oikeasti mitenkään?

No jos sä oot löytäny ihan esimerkki-sivun, niin mikset sä katso sieltä?

Firefoxiin vaan firebug, ellei F12 jo nykyversioissa avaa Chromen tapaan ihan tuota developer (tms) ikkunaa.

Sillä vaan katsot suoraan valmiit css-tyylit.

Ubuntun sivulla laatikot on määritelty etukäteen tietyn korkuisiksi ja eivät skaalaudu ikkunan kokoa vaihdettaessa.

Floattaamallahan nuo on perinteisesti rinnakkain laitettu. Leveydet vain suhteellisilla mitoilla niin skaalautuu kivasti.

<ul>
  <li>Eka</li>
  <li>Toka</li>
  <li>Kolmas</li>
</ul>

ul {
  overflow: hidden;
  list-style: none;
  padding: 0;
}
li {
  float: left;
  width: 33.333%;
}

Jos kaipaat hieman välistystä kuten esimerkissäkin niin onnistuu esim näin:

li {
  float: left;
  width: 32%;
  margin-left: 2%;
}
li:first-child {
  margin-left: 0;
}

Mod. lisäsi kooditagit!

Onko CSS3-palstojen käyttämisessä mitään järkeä?

On, jos voit elää vielä melko rajoittuneen selaintuen kanssa: http://caniuse.com/multicolumn

Ja tietysti riippuu mitä olet palstoittamassa. CSS columns soveltuu hyvin tilanteisiiin, jossa sinulla on lohko ja sen sisällä tekstiä mikä halutaan jakaa useampaan palstaan sanomalehtityyliin. Tuollainen esimerkin mukainen bannerikollaasi on taas ilman muuta selkeämpää lähteä toteuttamaan asemoimalla elementit rinnakkain määrittämällä niille palstan vaativan leveyden - 1/3 tässä tapauksessa.

MODE - pahoittelut, muistan ensi kerralla.

Tuonhan voi toteuttaa joskus CSS3:n flex boksin avulla. Ne ovat tuettuja tosin vasta IE 10:stä tai 11:sta alkaen riippuen siitä, mitä IE 10:n osittainen tuki tarkoittaa.

Selaintuki on muutenkin vielä vaatimatonta:
http://caniuse.com/flexbox