Prvi ste put ovdje? Pročitajte faq i registrirajte se.
x
  • Registracija
Dobrodošli, ovdje možete postavljati pitanja vezana za problematiku programiranja. Da bi postavili pitanje nije potrebna registracija :)

149 pitanja

181 odgovora

158 komentara

1,863 korisnika

Zadnje značke

Potvrđeni korisnik
AlberthaBeau...
Potvrđeni korisnik
AngelinaCarr...
Vrhunsko pitanje
Esmin Kadusc...
Potvrđeni korisnik
ShermanAzr56...
Potvrđeni korisnik
KarlSweetapp...

CSS - kolone istih visina?

+3 glasova

Koliko je preporučljivo umjesto floatanja div-ova za postizanje kolona u CSS-u koristiti display: table, display:table-row i display: table-cell?

CSS

<style type="text/css">
.tablica {
    max-width:960px;
    margin: 0 auto;
    padding: 0;
    display:table;
}
.red {
    display: table-row;
}
.celija {
    display: table-cell;
    width: 33%;
}
.prva{background-color:#ccc;}
.druga{background-color:#e6e6e6;}
.treca{background-color:#999;}
</style>

HTML

<h1>Lorem ipsum</h1>
<div class="tablica">
    <div class="red prvi">
        <div class="celija prva">
            <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt imperdiet neque at varius. Suspendisse potenti. 
            </p>
        </div>
        <div class="celija druga">
            <h2>Lorem ipsum</h2>
            <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt imperdiet neque at varius. Suspendisse potenti. 
            </p>
            <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt imperdiet neque at varius. Suspendisse potenti. 
            </p>
        </div>
        <div class="celija treca">
            <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt imperdiet neque at varius. Suspendisse potenti. 
            </p>
        </div>
    </div>
</div>

Evo i slike:
description

Upit Sij 26, 2012 ergonom (193)  
Ažurirano Sij 27, 2012 ergonom
   

Odgovor 1

+2 glasova
 
Najbolji odgovor

Ako se možeš pomiriti s činjenicom da ti u IE7 i starijima neće raditi display:table atribut meni je ovo OK. IE7 (nažalost) još uvijek koristi određeni postotak ljudi. Za njega možeš staviti

Pripazi da u IE 8 imaš DOCTYPE jer ti inače neće raditi ;)

DODATAK:

Cijeli primjer koji radi i u IE7. Kolone nisu jednake visine ali su "počišćene" kolone :D

<!doctype html>
<head>
<style type="text/css">
.tablica {
    max-width:960px;
    margin: 0 auto;
    padding: 0;
    display:table;
}
.red {
    display: table-row;
}
.celija {
    display: table-cell;
    width: 33%;
}
.prva{background-color:#ccc;}
.druga{background-color:#e6e6e6;}
.treca{background-color:#999;}
</style>
<!--[if lt IE 8]>
<style ="text/css">
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.celija{
    float:left;
    width: 33%;
}
</style>
<![endif]-->
</head>

<body>
<h1>Lorem ipsum</h1>
<div class="tablica">
    <div class="red prvi clearfix">
        <div class="celija prva">
            <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt imperdiet neque at varius. Suspendisse potenti. 
            </p>
        </div>
        <div class="celija druga">
            <h2>Lorem ipsum</h2>
            <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt imperdiet neque at varius. Suspendisse potenti. 
            </p>
            <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt imperdiet neque at varius. Suspendisse potenti. 
            </p>
        </div>
        <div class="celija treca">
            <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt imperdiet neque at varius. Suspendisse potenti. 
            </p>
        </div>
    </div>
</div>
</body>
</html>
Odgovoreno Sij 27, 2012 Predrag Mušić (562)  
odabrano Velj 1, 2012 primjeri