Bir resmin çevresindeki metni kaydırmak için kod gerekiyor mu? Normalde bir HTML sayfası oluşturduğunuzda, her şey doğrusal olarak akar, yani bir blok diğerinin ardına doğrudan gelir. Önceki gönderimlerimin tümü buna örn. Metin, resim, sonra metin, vb. Gibi bir örnektir.
Bazen resmin altındaki metnin altına metin eklemek isteyebilirsiniz. Buna resmin etrafına metin sarmak denir. Aslında, HTML kullanarak metni sarmalamak oldukça kolaydır. Metin sarmak için CSS kullanmanız gerekmediğini unutmayın.
Ancak, bu günlerde W3C, HTML yerine CSS kullanılmasını önerir. bu tür görevler için. Aşağıdaki iki yöntemden de bahsedeceğim, ancak yapabiliyorsanız, duyarlı web sitesi tasarımlarına daha fazla uyarlanabildiği için CSS'yi kullanmak daha iyidir.
HTML ile Resim Etrafında Metin Sarma
Lorem ipsum dolor oturmak, consectetur adipiscing elit. Fusce dictum gravida enim, quis ultricies mauris posuere quis. Duis tipidunt sagittis adipiscing. Cum sociis natoque penatibus et magnis dis mağdur yakınları, nascetur ridiculus mus. Bir dilekçe augue lobortis dictum. Curabitur molestie posuere laoreet. Lorem egestas non imperdiet enim congue'deki pellentesque rampa.
Metnin resmin sağ tarafından sarılmasını sağlamak için resmi sola hizalamanız gerekir:
<img itemprop="image" data-original="IMAGE URL" align="left" /><p>Your text goes here.</p>
Metnin solda görünmesini ve resmin en sağda görünmesini istiyorsanız, hizalama parametresini "sağ" olarak değiştirin.
Lorem ipsum dolor, amet, consectetur adipiscing elit. Fusce dictum gravida enim, quis ultricies mauris posuere quis. Duis tipidunt sagittis adipiscing. Cum sociis natoque penatibus et magnis dis mağdur yakınları, nascetur ridiculus mus. Bir dilekçe augue lobortis dictum. Curabitur molestie posuere laoreet. Lorem egestas non imperdiet enim congue içinde pellentesque rampa.
<img itemprop="image" data-original="IMAGE URL" align="right" /><p>Your text goes here.</p>
İşte bu kadar! Oldukça kolay değil mi? CSS'yi kullanmak istediğiniz tek zaman, resimlere kenar boşlukları eklemek, böylece metin ile resim arasında biraz boşluk kalmasıdır.
Bir resmi kullanarak kenar boşluklarını ekleyebilirsiniz. CSS stil kodunu takip etme:
<img itemprop="image" data-original=”IMAGE URL” align=”left” style=”margin: 0px 10px 0px 0px;” /><p>Your text goes here.</p>
Yukarıdaki kod, görüntünün sağ tarafında 10 piksel boşluk bırakmak için MARGIN CSS öğesini kullanır. Resmi sola hizaladığımızdan, boşlukları sağa eklemek istiyoruz.
Temel olarak, dört sayı TOP RIGHT BOTTOM SOL'u temsil eder. Yani, beyaz alanı sağa hizalı bir resme eklemek isterseniz, bunu yaparsınız:
<img itemprop="image" data-original=”IMAGE URL” align=”right” style=”margin: 0px 0px 0px 10px;” /><p>Your text goes here.</p>
Bu yüzden bu görevi gerçekleştirmek için HTML kullanmak oldukça basittir, ancak Yine, yanıt veren siteler için iyi çalışmayabilir.
CSS kullanarak Resme Etrafında Metin Sarma
Bir resmin etrafındaki metni sarmanın en iyi yolu, CSS'yi kullanmaktır. Bu, elementlerin konumlandırılması konusunda daha iyi tahıl kontrolü sağlar ve modern kodlama standartlarıyla daha iyi çalışır.
<img itemprop="image" data-original="IMAGE URL" alt="A photo" class="lazy left" />
HTML örneğindeki CSS'yi doğrudan resim etiketine eklesem de Bunu gerçekten yapmamalısın. Bunun yerine, tüm CSS kodunuzu içeren bir stil sayfası adı verilen ayrı bir dosyaya sahip olmalısınız.
IMG etiketinde, etikete bir sınıf atamanız ve ona bir ad vermeniz yeterlidir. Örneğimde, leftsınıfını seçtim. Stil sayfamda, tek yapmam gereken şu kodu eklemektir:
.left {
float: left;
padding: 0 10px 0 0;}
Gördüğünüz gibi, sol hizalı görüntünün sağ tarafına 10px dolgu ekledim . Görüntüyü belgenin normal akışının dışına taşımak ve ana kapsayıcının sol tarafına koymak için float özelliğini de kullandım.
Gördüğünüz gibi, tüm bu kodu eklemekten daha temiz IMG etiketinin kendisine. Ayrıca yönetmek daha kolaydır ve web sayfanızdaki görünümü özelleştirmek için çok daha fazla CSS özelliği kullanabilirsiniz. Herhangi bir sorunuz varsa yorum yapmaktan çekinmeyin. Tadını çıkarın!