Keskustelu: Nettisivujen teko: Laatikoiden rivittäminen

Onko olemassa jotain kätevää määritystä div:lle jolla ne saisi nppärästi riviin/ taulukoksi?

Eli teen vaikka 13 div putkeen ja haluaisin että ne rivittyy hienosti ikkunan leveyden mukaan.

Tämä tulee siis luupista ja satunnainen määrä divejä joten hankala tehdä rivi divejäkään.

Ärsyttää jos on erikorkuisia divejä niin seuraava rivi alkaa sitten sen korkean divin jälkeen Täytyisikö ne jotenkin pakottaa saman korkuisiksi?

esimerkkikuva
https://s3.amazonaws.com/aww-imagedata/8d692012-5bfa-405e-b2ca-b8a64bae955d.png

Täysin kontrolloimaton ruudukko on aika usein huono asia, olisi parempi tyytyä käyttämään muutamaa eri kokoa eli ns. breakpointteja. Css:llä toteutettuja grid-systeemeitä on netti pullollaan. Oikeastaanhan sun pitäisi jo käyttää jotain css-kehystä muutenkin.

esimerkiksi näin: Fiddle

Tuon row tavan kyllä tiedänkin mutta se on hankala kun noita divejä tulostellaan loopissa satunnainen määrä ja näytön leveyden mukaan näytetään. Olenko ihan väärällä tavalla lähestymässä tätä ongelmaa..?

Tarkoitus olisi tulostella sellaisia "kortteja" tietystä aiheesta..

A kortit
[][][][]
[][]

B kortit
[][]

C kortit
[][][][]
[][][][]
[][]

Noita kortteja siis rinnakkain niin paljonkun näytölle mahtuu.. esimerkissä mahtui 4.

Mikset vain tee for looppiin tarkistusta ja luo uusi row aina vaikka neljän jälkeen?

eli vähän tähän tyyliin:

<div class="row">
For(i = 1; i < items.length +1; i++)
{
  <div class="col">
      //stuff
  </div>

   if(i % 4 == 0)
   {
      </div>
      <div class="row">
   }
}
</div>

helpoimmalla pääset käyttämällä vaikka bootstrappia, ja asetat eri näkymiin määrät, montako korttia mahtuu. sisällön tulisi olla suhteellisen hallittua enivei, koska jos yhden kortin sisältö on megapitkä, muut kortit näyttää aika kököiltä pienin sisällöin.

mutta esim bootstrapilla hallitummin:

Mobiili xs, 1 kortti
tabletti sm, 2 korttia
desktopit md ja lg, 6 korttia

Kiitoksia, tuota bootstrapin tapaa täytyykin tutkia. Ei ole ollenkaan tuttuja nuo mainitsemasi jutut. Jos viitsit niin saa tehä esimerkin. :)

Kortit on varmasti aika lähellä samaa kokoa, mutta vapaata tekstiä tulee jonkin verran että olisi mukava ettei tarvitsisi kuitenkaan pakottaa saman kokoisiksi. Tosin olisise ulkoasullisesti kyllä hienompi jos olisivat täsmälleen samaa kokoa.

tähän tyyliin: Fiddle

Kaikkein yksinkertaisin keino on ”display: inline-block”. Silloin laatikot rivittyvät samalla tavalla kuin vaikkapa kuvat (img). Laatikolle on hyvä asettaa laittaa ainakin enimmäisleveys, koska muuten laatikko vie tilaa sisältönsä verran ja esimerkiksi teksti pyrkii siis pysymään yhdellä rivillä.

<style>
div.kortti {
	/* Laitetaan kortit rivittymään kuvien tavoin. */
	display: inline-block;
	/* Tasataan korttien yläreunat. */
	vertical-align: top;
}

/* Testausta varten laitetaan reuna ja marginaali. */
div.kortti {
	border: 1px solid red;
	margin: 1px;
}
</style>

<?php
// Testausta varten luodaan 50 korttia.
for ($i = 0; $i < 50; ++$i) {
	$w = rand(100, 200);
	$t = str_repeat("Lorem ipsum dolor sit amet. ", rand(5, 20));
	echo "<div class='kortti' style='width: {$w}px;'>{$t}</div>";
}

Hieno esimerkki. KIITOS!