v2.5.2
Giriş yap

html öğelerin sayfa boyu uzaması nasıl çözülür (css)

deadmonster
857 defa görüntülendi ve 1 kişi tarafından değerlendirildi
5

Bir tane divin içinde biri resim var ve resmin yanına yazı eklemek istiyorum. Normal bir yazı yazdığımda yanına geliyor. h4 kullandığımda yazı resmin altına geçiyor. Sağ tık incele yapıp h4'e bakdığımda bir iki kelime olsa bile h4 sayfa boyu devam ediyor. Ama ben sadece kelime boyu devam etsin ve bu sayede fotoğrafın yanına gelsin istiyorm. Bunu nasıl çözebilirim?

<span>
    <img src="dosya/<?= $blog["blog_img"] ?>" class="rounded" alt="" style="width: 100px;height:100px;">
</span>
<span>
    <h4>Örnek h4 yazısı</h4>            
</span>

link: https://prnt.sc/16frprx

css html
Cevap yaz
Cevaplar (5)
mustafasever
1277 gün önce

Kapsayiciya flex verip deneyebilirsiniz. display: flex; şeklinde

1
#005947
hvjyg
1275 gün önce

.

0
#006051
hakanarslan
1277 gün önce

h4 'ün stilini display:inline yaparsan ve resime float:left verirsen, h4 resmin yanına gelir ve kelime kadar genişlikte olur.

1
#005957
brbross
1277 gün önce

Merhabalar;
1-) İki öğenin de kapsayıcısına, x{display:flex;} vererek yan yana getirebilirsiniz.
2-) her iki öğeye de z,x{display:inline-block} vererek yan yana getirebilirsiniz. (img öğesi zaten inline'dir.)
3-) h4 yerine span kullanaral öğeleri yan yana getirebilirsiniz.
önerim: display:flex'i etkin bir şekilde öğrenmeniz ve kullanmanız.
Başarılar diliyorum :)

Dipnot: öğelerin görünüm seviyeleri (display:x;)'ni etkin bir şekiilde öğrenmez iseniz, HTML ve CSS'de çok sorun yaşarsınız.

1
#005956
selim
1277 gün önce

Bunun sebebi 'h' etiketleri ile 'span' etiketlerinin display değerlerinin farklı olması. Standart olarak span => display: inline, h etiketleri ise => display: block. Eğer h etiketinize display: inline derseniz boyut yazdığınız kelime uzunluğu kadar olacaktır.

2
#005949