Hoe tekst en een afbeelding naast elkaar in HTML plaatsen?

Ik wil de tekst en de afbeelding naast elkaar staan, maar ik wil dat de afbeelding helemaal links van het scherm is en ik wil dat de tekst helemaal rechts van het scherm is. Dit is wat ik momenteel heb …

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

Hoe kan ik dit doen?

bedankt


Antwoord 1, Autoriteit 100%

img {
    float:left;
}
h3 {
    float:right;
}

JSFiddle Voorbeeld

Merk op dat u waarschijnlijk de stijl wilt gebruiken clear:bothop welke elementen dan ook na de code die u hebt verstrekt, zodat deze niet rechtstreeks onder de drijvende elementen omhoog schuift.


Antwoord 2, Autoriteit 21%

U wilt CSS-float hiervoor kunt u het rechtstreeks in uw drijven code.

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

Maar ik zou echt aanraden om de basis van css te leren en al je styling op te splitsen in een apart stylesheet, en klassen te gebruiken. Het zal je in de toekomst helpen. Een goede plek om te beginnen is w3schoolsof, misschien later, Mozzila Dev. Netwerk (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;
}

Antwoord 3

U kunt verticaal uitlijnen en zwevend gebruiken.

In de meeste gevallen wilt u verticaal uitlijnen: midden, de afbeelding.

Hier is een test: http://www.w3schools. com/cssref/tryit.asp?filename=trycss_vertical-align

vertical-align: baseline|length|sub|super|top|text-top|middle|bottom|text-bottom|initial|inherit;

Voor middle is de definitie: Het element wordt in het midden van het bovenliggende element geplaatst.

Misschien wil je dat toepassen op alle elementen binnen het element.

Other episodes