[]
CSS Vertical ortalama (biraz karmaşık)
arkadaşlar ekteki fotorğafı şöyle anlatayım:
Yeşil karemizi ekrana veritcal middle olarak yerleştiriyoruz. Haliyle ekranın aşağısı ile yukarısında eşit boş alanlar kalıyor.
Ardından bu yeşil arkadaşın aşağısında kalan alana 2 tane dikdörtgen koyacağım. bu arkadaşlar da kendilerine kalan boşluğu eşit mesafelerde kullanacaklar.
Bu yapıyı nasıl kurabilirim acaba? Table mable denedim ama hiiiç sonuca yaklaşamadım bile. Son çare olarak jquery ile kalan alan hesabı yapıp oradan yürüyeceğim ama hiiiç tavsiye edilecek bişi olmaz. CSS ile çözümü varsa, en temizi.
i.imgur.com
Yeşil karemizi ekrana veritcal middle olarak yerleştiriyoruz. Haliyle ekranın aşağısı ile yukarısında eşit boş alanlar kalıyor.
Ardından bu yeşil arkadaşın aşağısında kalan alana 2 tane dikdörtgen koyacağım. bu arkadaşlar da kendilerine kalan boşluğu eşit mesafelerde kullanacaklar.
Bu yapıyı nasıl kurabilirim acaba? Table mable denedim ama hiiiç sonuca yaklaşamadım bile. Son çare olarak jquery ile kalan alan hesabı yapıp oradan yürüyeceğim ama hiiiç tavsiye edilecek bişi olmaz. CSS ile çözümü varsa, en temizi.
i.imgur.com
kisa zamanda ancak bunu yaptim
jsfiddle.net
isini görmezse less ile cözebilirsin, cünkü less de css icinde hesaplama yaptirabilirsin. Ya da degigin gibi jQuery ile dinamik hesaplatacaksin
Not: eger internet explorer 8 hedeflemiyorsan altta @bitti cok daha iyi cözüm sunmus, 9 da ise ms prefix gerekiyor. benimkini at cöpe
jsfiddle.net
isini görmezse less ile cözebilirsin, cünkü less de css icinde hesaplama yaptirabilirsin. Ya da degigin gibi jQuery ile dinamik hesaplatacaksin
Not: eger internet explorer 8 hedeflemiyorsan altta @bitti cok daha iyi cözüm sunmus, 9 da ise ms prefix gerekiyor. benimkini at cöpe
- emrahday (17.03.16 14:20:49 ~ 15:31:52)
Eğer tüm elemanların yüksekliklerini biliyorsanız absolute positioning ve biraz matematikle yapabilirsiniz CSS'te. Ancak bu hesaplamayı jquery ile yapmayı düşündüğünüze göre elemanların yükseklikleri sabit değil. Burada da işin içine flexbox giriyor. Fakat vendor prefixleri ve browser desteğini göz ardı etmeyin:
jsfiddle.net
jsfiddle.net
- bitti (17.03.16 14:57:51)
1