圖片符合文本HTML CSS

道歉仍然是新的所有這一切。我正在創建一個網頁，並在兩個獨立的div中分別顯示圖片和文字。我設法在頁面上將它們放在我想要的位置，但是當我調整頁面大小時，文本會調整大小，但圖像不會。我希望文本的底部始終與圖像底部對齊。圖片符合文本HTML CSS

任何幫助表示讚賞！這裏是代碼：

<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%; 
}

來源

2013-06-06 k.s

你能提供一個在線演示，或者創建一個以[的jsfiddle] – farjam

@farjam他已經張貼了他的代碼，只是讓小提琴自己 –

請img標籤寬度= 100％，這將適合於貼花格甚至在調整大小並增加像素，以高度

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

來源

2013-06-06 04:51:26

這是js小提琴鏈接http://jsfiddle.net/XV3JM/ –

user2458195是對的。但是將寬度添加到CSS而不是使用width屬性。

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%; 
}

來源

2013-06-06 05:05:17 Sourabh

謝謝，這已經使圖像停止重疊的文字是真棒，但圖像並不總是保持內聯當我調整瀏覽器窗口的大小時，文本的底部是否有任何方法可以使這種情況發生？我想知道是否這是與圖像的填充頂部是一個％？ –

@Sourabh接近。但你最好使用display:inline-block而不是float並使用vertical-align:bottom來對齊底部。

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; 
}

例：（？http://jsfiddle.net/）http://jsfiddle.net/ajdQa/

來源

2013-06-06 06:13:08

不錯！「內聯塊」沒有打到我的腦海裏。 '+ 1' :) – Sourabh

@Sourabh'inline-block'現在是我的現在，而不是浮動。如果沒有別的，它意味着沒有clearfixes –

圖片符合文本HTML CSS

回答

相關問題