Görüntü Metni İçeren HTML CSS

Tüm bunlar için hala yeni özür dileriz. Bir web sayfası oluşturuyorum ve yan yana iki ayrı div içinde bir resim ve metin var. Onları sayfada istediğim yere getirmeyi başardım, ancak sayfayı yeniden boyutlandırdığımda, metin yeniden boyutlandırılıyor ancak görüntü yok. Metnin alt kısmının her zaman görüntünün alt kısmı ile aynı hizaya gelmesini istiyorum.Görüntü Metni İçeren HTML CSS

Herhangi bir yardım için teşekkür ederiz! İşte kod:

<head> 

    <title>Stefano Mocini</title> 
    <link href='http://fonts.googleapis.com/css?family=Milonga' rel='stylesheet' type='text/css'> 
    <link href='styles/style.css' rel='stylesheet' type='text/css'> 
</head> 

<body> 

    <div id="title"> 
     Stefano Mocini 
    </div> 

    <div id="decal"> 
     <div id="image"> 
      <img src="images/tree.png" alt="tree" width="600" height="900"> 
     </div>  
    </div> 

    <div id="about"> 
     <p>THANK YOU SO MUCH FOR YOUR REVIEWS; YOUR DONATION AND FOR SHARING MY MUSIC!!!</p> 

     <p>About me: I started made music when I was only 6, because in the computer there was installed fruity loops, and I used it like a game. but i soon started to try to reproduce what i listened in the radio, so, step by step, i started to learn how to use this softwer. After i started to play the keyboard, that I received like christmast gift. One day I listened to "Back to life" from Allevi, and I loved it so much that I started to play the piano, every day. Step by step i learned how to make music, and how music is made . So now i can use the softwer whereby I played whan i was a child to make my own music. What kind of music should I make? Simply the one that I like!</p> 

     <p>You can use my music for making non-commercial videos or projects, but please put the title of the song and the author in the description otf the video or in the credits of the video.</p> 

     <p>Commercial use of my music: by the PRO license, or contact me</p> 
    </div> 

</body>

body { 
font-family: 'Milonga', cursive; 
} 

#title { 
font-size:72pt; 
text-align:center; 
} 


#decal { 
float:left; 
width:50%; 
float:left; 
height:80%; 
} 

#image { 
margin-top:60%; 
} 

#about { 
font-size:24pt; 
float:left; 
width:50%; 
padding-top:5%; 
height:80%; 
}

kaynak

2013-06-06 k.s

çevrimiçi bir demo sağlamak veya [JSFIDDLE] adresinde bir hesap oluşturun Can o var – farjam

@farjam zaten yayınlanmıştır onun kod , sadece kendini kandırmak –

img etiketi genişlik olun = bile boyutlandırmak div çıkartma ve yüksekliğe px eklemek uyacak% 100

<div id="decal"> 
    <div id="image"> 
     <img src="images/tree.png" alt="tree" width="100%" height="900px"> 
    </div>  
</div>

kaynak

2013-06-06 04:51:26

İşte js keman bağlantısı http://jsfiddle.net/XV3JM/ –

user2458195 haklı. Ancak width özniteliği yerine CSS'ye genişlik ekleyin.

Check this

Full Screen

CSS

* { 
    font-family:'Milonga', cursive; 
} 
#title { 
    font-size:72pt; 
    text-align:center; 
} 
#decal { 
    width:45%; /* changed to get some space btween #decal and #about */ 
    float:left; 
    height:80%; 
} 
#image { 
    margin-top:60%; 
} 

img { 
    width: 100% /* 100% of its parent ie, #decal*/ 
} 

#about { 
    font-size:24pt; 
    float:right; /* right to get some space */ 
    width:50%; /* try changing back to left n see what happens */ 
    padding-top:5%; 
    height:80%; 
}

kaynak

2013-06-06 05:05:17 Sourabh

Teşekkürler, bu görüntü harika olan metinle çakışmayı durdurdu, ancak görüntü her zaman Tarayıcı penceresini yeniden boyutlandırdığımda metnin alt kısmı, bunu gerçekleştirebilmem için herhangi bir yol var mı? Resmin bir yüzde olması için padding-top ile bir ilgisi olup olmadığını merak ediyorum? –

@Sourabh yakındır. Ancak, float yerine display:inline-block'u kullanmanız daha iyi olur ve altları hizalamak için vertical-align:bottom'u kullanın.

CSS

* { 
    font-family:'Milonga', cursive; 
} 
#title { 
    font-size:72pt; 
    text-align:center; 
} 
#decal { 
    font-size:24pt; /*Add this so that 1em is the same accross the divs*/ 
    padding-bottom:1em; /*Match the paragraph margin*/ 
    width:45%; 
    display:inline-block; 
    height:80%; 
    vertical-align:bottom; 
} 
#image { 
    margin-top:60%; 
} 

img { 
    width: 100% 
} 

#about { 
    font-size:24pt; 
    display:inline-block; 
    width:50%; 
    padding-top:5%; 
    height:80%; 
    vertical-align:bottom; 
}

Örnek: (? Http://jsfiddle.net/) http://jsfiddle.net/ajdQa/

kaynak

2013-06-06 06:13:08

Güzel! "satır içi blok" aklıma çarpmadı. '+ 1' :) – Sourabh

@Sourabh' inline-block' şimdi benim şamandıralar yerine artık benim. Başka bir şey varsa, net bir düzeltme olmadığı anlamına gelir. –

cevap

İlgili konular