[]

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

 
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
  • 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
  • bitti  (17.03.16 14:57:51) 
1
buraya yazılanların hakları Sir Anthony Hopkins'e aittir.
yazan eden compumaster, ilgilenen eden fader
modere edenler angelus, Artibir, aychovsky, baba jo, basond, compumaster, deckard, duyulmasi gerektigi kadar, fader, fraise, groove salad, kahvegibi, kaymaktutmayansicaksut, kibritsuyu, monstro, pandispanya, robin, ron dennis
bu sitede yazılanların hiçbiri doğru değildir. site içeriği küçükler için sakıncalı olabilir. yazılardan yazarları sorumludur. kaynak göstermeden alıntılanamaz. devlet tarafından atanmış bir kurumun internet üzerinde kimin hangi bilgiye ulaşıp ulaşamayacağına karar vermesi insan haklarına aykırıdır. web siteleri kullanıcıların istekleri doğrultusunda bağlandıkları yerlerdir. kullanıcılar isterlerse bir web sitesine bağlanmayabilirler. bu güçleri ve imkanları mevcuttur. bir kullanıcı bir siteye bağlanmak istiyorsa bu onun tercihi ve hakkıdır. bağlanmak istemiyorsa bu yine onun tercihi ve hakkıdır. halkın kendisine hizmet etmesi için görevlendirdiği kurumlar hadlerini aşıp halka neye ulaşıp ulaşmayacağını bilmeyen cahil cühela muamelesi edemezler. ebeveynlerin çocuklarını sakıncalı içeriklerden koruması için çok sayıda bedava ve ücretli yazılım mevcuttur. bu yazılımlar bir web tarayıcısını kullanmaktan daha karmaşık teknik bilgi gerektirmemektedir. devletin milletini küçük düşürmesi ve ebleh yerine koyması yasaktır. Skimlinks ile linkler üzerinden yönlendirme payı alınmaktadır.