Keskustelu: Nettisivujen teko: Kuva + tekstiä vierekkäin vuorotellen

Mikä on yksinkertaisin tapa tehdä tyypillistä ryhmitystä, jossa ensin on tekstiä vasemmalla ja kuva oikealla, sitten taas toisinpäin jne. Varmaan ainakin Applen ja Nokian sivuilta voi löytää esimerkkejä tästä.

Käytin ensin floatia, nyt position:relativea. Ongelma on se, että etäisyydet pitäisi mitata jokaiselle kohdalle erikseen (tai en tajua jotain kohtaa?) kun tekstimäärät ja joskus kuvienkin koot vaihtelee.

Teenkö oikealla tavalla vai löytyykö tähän parempikin keino?

Yleensä float on oikea eikä vaadi minkäänlaisia mittauksia. Oliko siinä jokin ongelma?

Jos vaikka oletetaan tämmöistä HTML:ää:

<p class="odd"><img alt="" src="kivakuva.jpg" />Diipadaapa.</p>
<p class="even"><img alt="" src="kivakuva2.jpg" />Diipadaapa.</p>

Niin sitten seuraava on ratkaisu ongelmaan:

p {
    clear: both;
}

p.odd img {
    float: right;
}

p.even img {
    float: left;
}

Eli clear: both; seuraavalle elementille, jonka haluat floatin alapuolelle.

Sitten taas vastaavasti jos tahdot, että kuvan isäntäelementti venyy vähintään floatin mittaiseksi, niin sekin onnistuu.

/* visualisointia sitä varten, että näkee elementin varmasti venyvän */
p {
    border-bottom: 1px solid black;
}

p:after {
    clear: both;
    content: '';
    display: block;
}

p.odd img {
    float: right;
}

p.even img {
    float: left;
}

Merrin esittämä tapa toimii kyllä, mutta ylläpito on hankalaa: mitäs kun halutaan lisätä väliin kappale? Joustavampaa on käyttää selektoria

p:nth-child(even)

jonka avulla voidaan erotella järjestysluvultaan parilliset kappaleet muista ja asettaa niille poikkeavat asetukset.

Tekstin ja kuvan välissä on syytä olla tyhjää tilaa jonkin verran, ja tämä sujuu asettamalla img-elementille margin-left tai margin-right sen mukaan, sijoitetaanko kuva oikealle vai vasemmalle.