CSS ile kayan bir görüntünün etrafına metin sarmayı nasıl yapacağınızı öğrenin.
Metninizi, bu makaleyi tanıtan fotoğraftakine benzer şekilde sağdaki resmin etrafına sarmak için aşağıdaki gibi bir CSS kuralı kullanın:
Float: left kuralı, görüntünün sol kenar boşluğuna taşınmasını sağlar. Sağ dolgu kuralı, metnin görüntünün sağ tarafına çarpmasını önler. Bu görüntüye bir kenarlık eklenirse, görüntü ile kenarlık arasına padding gelirdi. Kenarlıklı bir görüntüyle çalışmak için Bölüm 2'ye bakın.
Ardından, ortalamak için görüntünün soluna ve sağına kenar boşlukları ekleyin. Herhangi bir şeyi ortalamak için sol ve sağ kenar boşlukları için uygun değer otomatiktir.
Oluk kenarlık stilini kullanarak kalın, çerçeve benzeri bir kenarlık oluşturmak için şuna benzer bir kural kullanılabilir:
Diğer kenarlık stilleri düz, noktalı, kesikli, çift, çıkıntı, iç ve dış kenar stilleridir. Genişlik piksel, ems veya yüzde olarak ifade edilebilir.
Kenarlıklar, görüntünün üstüne, sağına, altına ve soluna seçici olarak uygulanabilir. Alt gölge gibi bir efekt oluşturmak için bu bilgiyi kullanabilirsiniz.
Sadece sağ ve alt kenarlıkta 2 gri tonunda düz bir kenarlık kullanarak bir alt gölge efekti elde edersiniz.
img { kayan nokta: sol; sağ kenarlık stili: katı; sağ kenarlık genişliği: 8 piksel; kenarlık-sağ-renk: #CCCCCC; sınır-alt-tarzı: katı; sınır-alt genişlik: 8 piksel; sınır-alt-renk: #999999; kenar-sağ: 1em; kenar boşluğu-alt: 1em; }
Uç
Bir sayfanın birden fazla bölümünde (div) resimleriniz varsa, bunları ayrı ayrı biçimlendirmek için alt seçicileri kullanın. Olası seçiciler: #content img, #sidebar img, #feature img.