CSS aligner le texte de l'image - html, css, html5, css3, css-float

Comment puis-je aligner l'image à gauche et du texte en haut à droite et du texte en bas à droite? Le parent div a une image de fond.

<div id="parent" style="background: url(bg.jpg) repeat-x left top">
<img src="/images/a.png"> <!--align left-->
"Some text A" <!-- align on right top -->
"Some text B" <!-- align on right bottom -->
</div>

Merci d'avance :)

Réponses:

3 pour la réponse № 1

Vous pouvez essayer quelque chose comme ça: Mon violon

Aperçu

CSS

.text1 {
position: relative;
right: 0px;
display: block;
}
.text2 {
position: relative;
top: 20px;
display: block;
}

HTML

<div id="parent" style="background: url("") repeat-x left top">
<img src="/images/http://upload.wikimedia.org/wikipedia/commons/1/19/Crystal_folder_image.png" style="float: left;"> <!--align left-->
<span class="text1">"Some text A"</span> <!-- align on right top -->
<span class="text2">"Some text B"</span> <!-- align on right bottom -->
</div>​

Un séjour sans faille

---

4 pour la réponse № 2

Regarde ce violon

http://jsfiddle.net/qMXZv/1/

<div id="parent" style="position:relative;width:300px;height:300px;background: url(http://wallpaperplus.org/wp-content/gallery/019-wallpaper-wallpaper-03/desktop-wallpaper-52.jpg) repeat-x left top">
<img width=100 height=300 src="/images/http://stichtingpani.nl/wp-content/uploads/2011/11/google_logo.jpg" align="left"> <!--align left-->
<span style="position:absolute;top:10px;"> "Some text A"</span> <!-- align on right top -->
<span style="position:absolute;bottom:10px;v-align:top;">"Some text B" </span><!-- align on right bottom -->
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

MODIFIER

J'ai mis à jour l'exemple

EDIT 2

Ce que vous avez besoin est de spécifier que votre div parent est position:relative Cela rend tous les éléments "absolus" positionnés de manière absolue par rapport au conteneur div, au lieu du coin supérieur droit de la fenêtre du navigateur.

Spécifiez ensuite la largeur et la hauteur de la div de conteneur de manière à occuper l'espace que vous souhaitez occuper. Et vous savez toujours avec quoi vous travaillez.

Ensuite, sur le texte, ajoutez des conteneurs de largeur et positionnez-les absolument en haut et en bas. De cette façon, il s’alignera en haut et en bas.

le <img> la balise a besoin des paramètres align="left" aligner à gauche et le texte à droite.

---

1 pour la réponse № 3

Est-il possible de modifier un peu votre code HTML? Quelque chose comme ça:

HTML

<div id="parent" style="background: url(bg.jpg) repeat-x left top">
<div class="right">"Some text A" <!-- align on right top --></div>
<div><img src="/images/a.png"> <!--align left--></div>
<div class="right">"Some text B" <!-- align on right bottom --></div>
</div>

CSS

.right {text-align: right;}

Violon: http://jsfiddle.net/4PTgj/

Ou au cas où, si vous souhaitez que le texte soit aligné dans l'image, un autre léger changement dans le CSS:

#parent {position: relative;}
.right {text-align: right; position: absolute; bottom: 0; right: 0;}
.right:first-child {bottom: auto; top: 0;}​

Violon: http://jsfiddle.net/4PTgj/1/

---

0 pour la réponse № 4

Vous pouvez essayer quelque chose comme ça,

<div id="parent" style="background: url(bg.jpg) repeat-x left top">
<span style="float:right">"Some text A"</span>  <!-- align on right top -->
<img src="/images/http://static.adzerk.net/Advertisers/e395a21294854772970cdd37e15bbb78.png"> <!--align left-->

<span style="float:right">"Some text B"</span> <!-- align on right bottom -->
</div>​

Démo: http://jsfiddle.net/kbpBK/1/

---