Responsive sütun nasıl yapılır?

01-08-2014, 14:44:18

Örnek ile açıklamak istiyorum.
Sitemin çalışma şekli şöyle;

Div id - yüksekliği
1-120
2-150
3-140
4-130
5-140
Bunları 150 px yüksekliğine sabitledim ve sorunsuz çalışıyor.
Bunların genişlikleri minimum 120px ve float left

Site genişliği;
240-360 ise 2 div olacak ve dizilim şöyle olacak (width %50)
1-2
3-4
5-6
...
360-480 ise 3 div olacak(width %33)
1-2-3
4-5-6
...
480+ ise
4 div olacak(width 120px)
1-2-3-4
5-6-7-8

ama ben yükseklikleri 150 değil de belirtilen gibi olmasını istiyorum ve sıralama belirttiğim gibi olmalı. Column 2-3-4 yapınca;
1-5
2-6
3-7
4-8
Şeklinde Oluyor.

01-08-2014, 14:58:04

#2

S_HA_DO_W

bootstrap css dosyasını incelerseniz çok güzel bir şekilde ve anlaşılır olarak yazılmıştır. size güzel kaynak olabilir.

http://maxcdn.bootstrapcdn.com/boots.../bootstrap.css

@media (min-width: 992px) {
  .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
    float: left;
  }
  .col-md-12 {
    width: 100%;
  }
  .col-md-11 {
    width: 91.66666667%;
  }
  .col-md-10 {
    width: 83.33333333%;
  }
  .col-md-9 {
    width: 75%;
  }
  .col-md-8 {
    width: 66.66666667%;
  }
  .col-md-7 {
    width: 58.33333333%;
  }
  .col-md-6 {
    width: 50%;
  }
  .col-md-5 {
    width: 41.66666667%;
  }
  .col-md-4 {
    width: 33.33333333%;
  }
  .col-md-3 {
    width: 25%;
  }
  .col-md-2 {
    width: 16.66666667%;
  }
  .col-md-1 {
    width: 8.33333333%;
  }
}

yukarıdaki örnekte col-md-* için değerleri görebilirsiniz.
ekran boyuturu 992px den büyük ise bu şekilde davranacaktır.
md (medium) olduğu için 992px in altındaki ekran boyutunda %100 olacaktır.
yukarıdaki örneğe göre istediğin ekran boyutları arasında istediğin div in alabileceği değerleri belirtebilirsin.

Örnek birkaç @media özelliği

Maximum 767px ekran boyutuna kadar nasıl görüneceği

@media (max-width: 767px) {
...
..
}

992px ile 1199px arasında nasıl görüneceği

@media (min-width: 992px) and (max-width: 1199px) {
....
..
}

Minimum 1200px de nasıl görüneceği

@media (min-width: 1200px) {
....
..
}

01-08-2014, 15:10:21

#3

CanArs12

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

bootstrap css dosyasını incelerseniz çok güzel bir şekilde ve anlaşılır olarak yazılmıştır. size güzel kaynak olabilir.

http://maxcdn.bootstrapcdn.com/boots.../bootstrap.css

@media (min-width: 992px) {

  .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {

    float: left;

  }

  .col-md-12 {

    width: 100%;

  }

  .col-md-11 {

    width: 91.66666667%;

  }

  .col-md-10 {

    width: 83.33333333%;

  }

  .col-md-9 {

    width: 75%;

  }

  .col-md-8 {

    width: 66.66666667%;

  }

  .col-md-7 {

    width: 58.33333333%;

  }

  .col-md-6 {

    width: 50%;

  }

  .col-md-5 {

    width: 41.66666667%;

  }

  .col-md-4 {

    width: 33.33333333%;

  }

  .col-md-3 {

    width: 25%;

  }

  .col-md-2 {

    width: 16.66666667%;

  }

  .col-md-1 {

    width: 8.33333333%;

  }

}

yukarıdaki örnekte col-md-* için değerleri görebilirsiniz.

ekran boyuturu 992px den büyük ise bu şekilde davranacaktır.

md (medium) olduğu için 992px in altındaki ekran boyutunda %100 olacaktır.

yukarıdaki örneğe göre istediğin ekran boyutları arasında istediğin div in alabileceği değerleri belirtebilirsin.

Örnek birkaç @media özelliği

Maximum 767px ekran boyutuna kadar nasıl görüneceği

@media (max-width: 767px) {

...

..

}

992px ile 1199px arasında nasıl görüneceği

@media (min-width: 992px) and (max-width: 1199px) {

....

..

}

Minimum 1200px de nasıl görüneceği

@media (min-width: 1200px) {

....

..

}

Bu dediğinizi zaten yaptım. Benim sorunum yükseklik ile alakalı.
1-2-3-4
5-6-7-8 şeklinde konduğunda tam uygun bi yerleşim olmuyor.