Image En Ligne Avec du Texte HTML CSS

Excuses encore nouveau pour tout cela. Je suis en création d'une page web et de disposer d'une image et de texte à côté de l'autre, dans deux div. J'ai réussi à les amener là où je veux sur la page, mais quand je le redimensionnement de la page, le texte est redimensionné, cependant, l'image n'est pas. Je veux que le fond du texte à la ligne avec le bas de l'image à tout moment.

Toute aide appréciée! Voici le code:

<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%;
}
Pouvez-vous fournir une démonstration en ligne ou en créer un à l'adresse JSFIDDLE
il a déjà publié son code, il suffit de faire le violon vous-même

OriginalL'auteur k.s | 2013-06-06

  1. 7

    @Sourabh est proche. Mais vous feriez mieux d'utiliser display:inline-block au lieu de float et l'utilisation vertical-align:bottom pour aligner le fond.

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

    Exemple: http://jsfiddle.net/ajdQa/

    Nice! inline-block n'a pas frappé mon esprit. +1 🙂
    est maintenant mon go-to maintenant, au lieu de flotteurs. Si rien d'autre, c'est non clearfixes

    OriginalL'auteur Jon P

  2. 1

    user2458195 est droit. Mais ajouter la largeur de CSS au lieu d'utiliser width attribut.

    Case

    Plein Écran

    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%;
}
    Merci, qui a fait l'image d'arrêt de chevauchement avec le texte qui est génial, mais l'image n'est pas toujours rester en ligne avec le bas du texte quand j'ai redimensionner la fenêtre du navigateur, est-il un moyen pour que je puisse faire cela? Je me demande si c'est quelque chose à voir avec le padding-top pour l'image d'un % ?

    OriginalL'auteur Sourabh

  3. 0

    veuillez vous rendre balise img width=100% qui s'adapte à décalque div même sur redimensionner et ajouter px de hauteur

    <div id="decal">
    <div id="image">
        <img src="images/tree.png" alt="tree" width="100%" height="900px">
    </div>      
</div>
    Voici le js fiddle lien jsfiddle.net/XV3JM

    OriginalL'auteur Prakash R