web-dev-qa-db-fra.com

Comment placer le texte et une image côte à côte en HTML?

Je veux que le texte et l'image soient côte à côte mais je veux que l'image soit à l'extrême gauche de l'écran et que le texte soit à l'extrême droite de l'écran. C'est ce que j'ai actuellement ....

<body>
<img src="website_art.png" height= "75" width= "235"/>
<h3><font face="Verdana">The Art of Gaming</font></h3>
</body>

Comment puis-je faire ceci?

Merci

htmlcssimagetext
21
user2426533
img {
    float:left;
}
h3 {
    float:right;
}

Exemple jsFiddle

Notez que vous voudrez probablement utiliser le style clear:both pour tous les éléments venant après le code que vous avez fourni afin qu'il ne glisse pas directement sous les éléments flottants.

26
j08691

Vous voulez utiliser css float pour cela, vous pouvez le mettre directement dans votre code.

<body>
<img src="website_art.png" height= "75" width="235" style="float:left;"/>
<h3 style="float:right;">The Art of Gaming</h3>
</body>

Mais je suggérerais vraiment d'apprendre les bases du CSS et de scinder tout votre style en une feuille de style séparée et d'utiliser des classes. Cela vous aidera dans le futur. Un bon point de départ est w3schools ou peut-être plus tard, Mozzila Dev. Réseau (MDN) .

HTML:

<body>
  <img src="website_art.png" class="myImage"/>
  <h3 class="heading">The Art of Gaming</h3>
</body>

CSS:

.myImage {
  float: left;
  height: 75px;
  width: 235px;
  font-family: Veranda;
}
.heading {
  float:right;
}
4
Dominic Green

Vous pouvez utiliser vertical-align et floating.

Dans la plupart des cas, vous souhaitez aligner verticalement: le milieu, l'image.

Voici un test: http://www.w3schools.com/cssref/tryit.asp?filename=trycss_vertical-align

vertical-align: ligne de base | longueur | sous | super | haut | texte haut | milieu | bas | texte bas | initial | inherit;

Pour le milieu, la définition est la suivante: L'élément est placé au milieu de l'élément parent.

Donc, vous voudrez peut-être appliquer cela à tous les éléments de l'élément.

0
Illuminati