CSS ile resimleri sıralama

11-08-2016, 00:26:00

Şema gibi bir sayfa var. Üstte 1 resim, onun altında 2 resim, onun da altında 3 resim gibi 4 satırlık resimler var.

2 resim yan yana gelecek, onun altında ise 3 resim yan yana gelecek.

Her bir satır için div oluşturdum. display:inline ve float:left değerleri atadım ama sonuç yok.

Nasıl yapabilirim sizce ?

11-08-2016, 00:39:44

#2

thealiyasar

solgentas adlı üyeden alıntı: mesajı görüntüle

Şema gibi bir sayfa var. Üstte 1 resim, onun altında 2 resim, onun da altında 3 resim gibi 4 satırlık resimler var.

2 resim yan yana gelecek, onun altında ise 3 resim yan yana gelecek.

Her bir satır için div oluşturdum. display:inline ve float:left değerleri atadım ama sonuç yok.

Nasıl yapabilirim sizce ?

 
    <div class="Kapsa">
        <ul class="Satir">
            <li><img src="res.png"></li>
            <li><img src="res.png"></li>
        </ul>
        <ul class="Satir">
            <li><img src="res.png"></li>
            <li><img src="res.png"></li>
            <li><img src="res.png"></li>
        </ul>
         <ul class="Satir">
            <li><img src="res.png"></li>
            <li><img src="res.png"></li>
            <li><img src="res.png"></li>
            <li><img src="res.png"></li>
        </ul>
         <ul class="Satir">
            <li><img src="res.png"></li>
            <li><img src="res.png"></li>
            <li><img src="res.png"></li>
            <li><img src="res.png"></li>
            <li><img src="res.png"></li>
        </ul>
        <ul class="Satir">
            <li><img src="res.png"></li>
            <li><img src="res.png"></li>
            <li><img src="res.png"></li>
            <li><img src="res.png"></li>
            <li><img src="res.png"></li>
            <li><img src="res.png"></li>
        </ul>
    </div>

.Kapsa{
    position: relative;
    width: 1000px;
    height: auto;
    background: #cecece;
    margin: 0  auto;
}
.Kapsa .Satir{
    list-style: none;
    margin: 0;
    padding: 0;
    display: block;
    text-align: center;
}
.Kapsa .Satir li {
    display: inline-block;
}

Demo :

İndir

11-08-2016, 00:42:46

#3

solgentas

Birdilimask adlı üyeden alıntı: mesajı görüntüle

 
    <div class="Kapsa">
        <ul class="Satir">
            <li><img src="res.png"></li>
            <li><img src="res.png"></li>
        </ul>
        <ul class="Satir">
            <li><img src="res.png"></li>
            <li><img src="res.png"></li>
            <li><img src="res.png"></li>
        </ul>
         <ul class="Satir">
            <li><img src="res.png"></li>
            <li><img src="res.png"></li>
            <li><img src="res.png"></li>
            <li><img src="res.png"></li>
        </ul>
         <ul class="Satir">
            <li><img src="res.png"></li>
            <li><img src="res.png"></li>
            <li><img src="res.png"></li>
            <li><img src="res.png"></li>
            <li><img src="res.png"></li>
        </ul>
        <ul class="Satir">
            <li><img src="res.png"></li>
            <li><img src="res.png"></li>
            <li><img src="res.png"></li>
            <li><img src="res.png"></li>
            <li><img src="res.png"></li>
            <li><img src="res.png"></li>
        </ul>
    </div>

.Kapsa{
    position: relative;
    width: 1000px;
    height: auto;
    background: #cecece;
    margin: 0  auto;
}
.Kapsa .Satir{
    list-style: none;
    margin: 0;
    padding: 0;
    display: block;
    text-align: center;
}
.Kapsa .Satir li {
    display: inline-block;
}

İndir

Eline, emeğine sağlık kardeşim. Çok teşekkür ederim. Deniyorum şimdi.

11-08-2016, 00:45:12

#4

thealiyasar

solgentas adlı üyeden alıntı: mesajı görüntüle

Eline, emeğine sağlık kardeşim. Çok teşekkür ederim. Deniyorum şimdi.

Demo görünümde ekledim. Estf. paylaşmak erdemliktir. İstediğini sorabilirsin. Genel mantık budur.

11-08-2016, 00:53:05

#5

solgentas

Birdilimask adlı üyeden alıntı: mesajı görüntüle

Demo görünümde ekledim. Estf. paylaşmak erdemliktir. İstediğini sorabilirsin. Genel mantık budur.

Tamamdır, oldu. Çok çok teşekkür ederim yine. Komple hallettikten sonra soracaklarım olabilir, kusura bakma

11-08-2016, 00:55:57

#6

thealiyasar

solgentas adlı üyeden alıntı: mesajı görüntüle

Tamamdır, oldu. Çok çok teşekkür ederim yine. Komple hallettikten sonra soracaklarım olabilir, kusura bakma

Rica ederim hocam. Bilgimiz yettikçe yardımcı oluruz