Bir görüntüyü metnin sağına nasıl kaydıracağınızı öğrenmek istiyorsanız, bu oldukça basit bir iştir. Programcıların bir Web sayfasındaki bir görüntünün metnin içinde akan veya etrafına sarılmış metin içinde görünmesini istedikleri birçok durum vardır. Görüntüleri manipüle etmek, metni manipüle etmeye benzer, bu nedenle ikincisiyle ilgili deneyiminiz varsa, bu işlem hiç de zor olmamalıdır. Aslında, CSS float özelliğiyle, resminizi metnin sağına kaydırmak ve metnin sol tarafında onun etrafında akmasını sağlamak kolaydır. Nasıl yapılacağını öğrenmek için bu beş dakikalık öğreticiyi kullanın.
Float ile Düzen Ayarlama
Bu temel düzen, metniniz için bir boşluk yaratacak ve bu metnin sağında bir görüntü yüzecek. Elbette, bu düzenler daha karmaşık hale gelebilir, ancak bu örnek size kayan nokta ve metinle çalışmanın arkasındaki temel prensibi gösterecektir.
-
Zaten üzerinde çalıştığınız bir HTML belgeniz ve ayrı bir CSS stil sayfanız olduğunu varsayarak, kayan öğenizi içeren satır olarak işlev görecek yeni bir div oluşturarak başlayın.
-
Bu yeni div’e iki sınıf, container ve clearfix verin. Bununla başa çıkmanın birçok yolu vardır ve isimler tamamen sizin seçiminizdir, ancak bunlar düzenli kalmanıza ve düzeninizi oluşturmanıza yardımcı olacaktır.
-
CSS’nizde kapsayıcınızın genel düzeninize nasıl uymasını istediğinizi tanımlayın. Bu örnek sadece onu tam genişlikte bir satır yapacak. .konteyner {
genişlik: %100;
yükseklik: 25rem;
} -
Ardından, clearfix sınıfına dikkat edin. Float düzeninizde bazı garip hatalar oluşturabileceğinden, düzeltme gereklidir. Düzeltmede “taşma” özelliğinin tanımlanması, yüzen öğelerin belirlenen alandan taşmasını durdurur. .temizle düzeltme {
taşma: otomatik;
} -
Şimdi, kapsayıcı div’inizde bir öğe oluşturabilir ve onu sağa kaydırabilirsiniz. Bir resmin etrafına metin sarıyorsanız, bu sizin resminiz olur. Öğeyi oluşturun ve ona float özelliği için bir sınıf verin.
-
Float’ınız için sınıfı oluşturun. Daha fazla özdeş öğeler yapacaksanız, muhtemelen oraya da biraz stil atmak isteyeceksiniz. Aksi takdirde, stiliniz için ayrı bir sınıf uygulayabilirsiniz. .Sağa çık {
Sağa çık;
genişlik: 300 piksel;
yükseklik: 200 piksel;
arka plan rengi: kırmızı;
marj: 0 0 0.5rem 0.5rem
} -
Bu kayan öğenin etrafına metin sarmak istiyorsanız, metninizi şimdi ekleyin. Yüzen öğeden önce veya sonra kabın içinde herhangi bir yere koyun.
Bazı metin
Daha fazla metin
…ve benzeri. -
Sayfanızı yenileyin ve sonucu kontrol edin.
Toplama
Ve bunu yapar. Şimdi bir görüntüyü sağa kaydırmanın hiç de zor olmadığını görüyorsunuz. Bir görüntüyü sola kaydırmak ve onu merkeze kaydırmakla da ilgilenebilirsiniz. İlk hareket mümkün olsa da, ne yazık ki bir görüntüyü merkeze kaydıramazsınız, çünkü bu genellikle iki sütunlu bir düzen gerektirir.
mla apa chicago Alıntınızı Biçimlendirin
Kyrin, Jennifer. “Bir Resmi Metnin Sağına Nasıl Kaydırırsınız?” Düşünce Şirketi, Mayıs. 14, 2021, thinkco.com/float-image-to-right-of-text-3466409.
Kyrin, Jennifer. (2021, 14 Mayıs). Bir Resim Metnin Sağına Nasıl Kaydırılır. https://www.thinktco.com/float-image-to-right-of-text-3466409 adresinden alındı
Kyrin, Jennifer. “Bir Resmi Metnin Sağına Nasıl Kaydırırsınız?” Düşünce Şirketi https://www.thinktco.com/float-image-to-right-of-text-3466409 (17 Haziran 2021’de erişildi).
