Obraz w wierszu z tekstem HTML CSS

Przeprosiny wciąż nowe w tym wszystkim. Tworzę stronę internetową i mam obraz i tekst obok siebie, w dwóch oddzielnych elementach div. Udało mi się je umieścić tam, gdzie chcę, na stronie, ale kiedy zmieniam rozmiar strony, tekst zmienia się, ale obraz nie. Chcę, aby dolna część tekstu była zawsze wyrównana z dolną częścią obrazu.Obraz w wierszu z tekstem HTML CSS

Każda pomoc doceniona! Oto 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%; 
}

Źródło

2013-06-06 k.s

można dostarczyć demo online lub utworzyć pod adresem [JSFIDDLE] – farjam

@farjam on już pisał jego kod , po prostu zrób skrzypce sam –

upewnij img tag width = 100%, co będzie pasować do kalkomanii div nawet na zmianę rozmiaru i dodać px do wysokości

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

Źródło

2013-06-06 04:51:26

Oto js fiddle link http://jsfiddle.net/XV3JM/ –

user2458195 ma rację. Ale dodaj szerokość do CSS zamiast używać atrybutu 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%; 
}

Źródło

2013-06-06 05:05:17 Sourabh

Dzięki, że obraz przestał pokrywać się z tekstem, który jest niesamowity, ale obraz nie zawsze pozostaje w linii z w dolnej części tekstu, gdy zmieniam rozmiar okna przeglądarki, czy jest jakiś sposób, aby to umożliwić? Zastanawiam się, czy to ma coś wspólnego z wyściółką, żeby obraz był%? –

@Sourabh jest blisko. Ale lepiej byłoby użyć display:inline-block zamiast float i użyć vertical-align:bottom do wyrównania spodów.

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

Przykład: (? Http://jsfiddle.net/) http://jsfiddle.net/ajdQa/

Źródło

2013-06-06 06:13:08

Nice! 'inline-block' nie uderzył mnie w głowę. '+ 1' :) – Sourabh

@Sourabh' inline-block' jest teraz moim celem, zamiast pływać. Jeśli nic innego nie oznacza to braku poprawek –

Obraz w wierszu z tekstem HTML CSS

Odpowiedz

Powiązane problemy