Bir Görüntüyü Sağa Kaydırmak için CSS Nasıl Kullanılır

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 etme metni değiştirmeye benzer, bu nedenle ikincisiyle 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 etrafında akmasını sağlamak kolaydır. Sol Taraf. 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ü kaydıracaktır. 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.

  1. Zaten üzerinde çalıştığınız bir HTML belgeniz ve ayrı bir CSS stil sayfanız olduğunu varsayarsak, kayan öğenizi içeren satır olarak işlev görecek yeni bir div oluşturarak başlayın.

  2. instagram viewer
  3. 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.

  4. 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;
    }
  5. Ardından, clearfix sınıfına dikkat edin. Düzeltme gereklidir, çünkü float düzeninizde bazı garip hatalar oluşturabilir. Düzeltmede "taşma" özelliğinin tanımlanması, yüzen öğelerin belirlenen alandan taşmasını durdurur.

    .temizle düzeltme {
    taşma: otomatik;
    }
  6. Ş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.


  7. Float'ınız için sınıfı oluşturun. Daha ö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
    }
  8. 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.

  9. Sayfanızı yenileyin ve sonucu kontrol edin.

    CSS öğesi sağa kayar

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ırmak da ilginizi çekebilir. İ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.