Bir web sayfasında doğru şekilde hizalanmış görüntüler nasıl oluşturulur?

CSS float özelliklerini kullanarak, bu metnin sağındaki resimde görüldüğü gibi herhangi bir görüntüyü, herhangi bir metnin sağına kaydırabilirsiniz. Bunu web sayfanızda yapmak için aşağıdaki adımları izleyin.

Bu örnekte harici bir CSS dosyası kullanacağız. Harici bir CSS dosyası kullanarak, CSS dosyasına bir bağlantı içeren herhangi bir sayfada kayan bir görüntü oluşturabilirsiniz. Harici CSS dosyaları da gelecekte ayarlamak isteyebileceğiniz ayarları değiştirmeyi kolaylaştırır.

1. Bir CSS dosyası oluşturun. Web sayfanız için zaten bir CSS dosyanız varsa, CSS dosyanızı düzenleyin ve aşağıdaki kodu ekleyin.

2. Aşağıdaki kodu CSS dosyasına ekleyin.

 .floatRight {yüzer: sağ; kenar sol: 20 piksel} 

İpucu: Kayan nokta eklemek: sol, resmin metnin sol tarafında görünmesini sağlar.

Sağda yüzen birden fazla görüntünün olmasını istiyorsanız, CSS dosyasına aşağıdaki satırı da ekleyin.

 .floatRightClear {float: right; net: right; margin-left: 20px} 

3. Yukarıdaki kod oluşturulduktan sonra, aşağıdaki örneğe benzer bir kod kullanarak CSS dosyasını kaydedin ve her HTML sayfasından arayın. Örneğimizde, CSS dosyasına style.css adını verdik.

4. Son olarak, kabın sağ tarafındaki yüzdürmek istediğiniz görüntüye ekleyin.