Изображение в строке с текстом 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 fiddle 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

Спасибо, что заставил изображение перестать накладываться на текст, который является удивительным, но изображение не всегда остается встроенным с в нижней части текста, когда я изменяю размер окна браузера, есть ли способ сделать это возможным? Мне интересно, это что-то делать с padding-top для изображения, являющегося%? –

@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

Ницца! 'inline-block' не попал мне в голову. '+ 1' :) – Sourabh

@Sourabh' inline-block' теперь теперь мой go-to вместо плавающих. Если ничего другого не означает, что clearfixes –

Изображение в строке с текстом HTML CSS

ответ

Смежные вопросы