Daha önce kolon yüksekliklerini eşitlemek için Aksak Kolonlar(Faux Column) yazımda bir çözüm önerisi vardı.
Bu çözümlere bir tane daha ekliyorum.
CSS Renk Geçişleri (Gradients) yazısında renk geçişlerinden bahsetmiştik. Renk geçişlerini tanımlarken genelde yüzdesel tanımlasak ta aslında piksel’de kullanabiliyoruz. Bu kullanım bize aksak kolonların çözümünü sağlıyor. Peki renk geçişi diyorsun ama bize tek renkli ardalan renkleri lazım diye sorarsanız. Renk geçişinde ilk rengin bitişi ile diğer renge geçişin olduğu yerleri aynı durma noktası yaparsak ardalan rengi tek renk olur. Örnekten daha iyi anlayacağız.
Yukarıdaki örnekte görüldüğü gibi sol kolon kesik kalıyor. Bunu düzeltmek için.
Dikkat edeceğimiz kod;
background-image linear-gradient(left, #ccc 284px, #fff 284px, #fff 100%)Yukarıdaki kodlamada olduğu gibi değeri piksel cinsinden verdiğimiz gibi yüzde cinsinden de verebiliriz.
Diğer yöntemden farkı resim kullanmadan bu işi yapıyor olmamız. Buda bize esneklik sağlıyor. Bu yöntemin tek eksiği belki ie9 ve öncesi için desteğinin olmaması. Eğer müşteri çok ısrar ederse ie8 ve ie9 için resimli diğer yöntemi kullanabiliriz.
Kalın sağlıcakla.