Jak umieścić tekst i obraz obok siebie w kodzie HTML?

Chcę, aby tekst i obraz były obok siebie, ale chcę, aby obraz był po lewej stronie ekranu i chcę, aby tekst znajdował się po prawej stronie ekranu. To, co obecnie mam ....Jak umieścić tekst i obraz obok siebie w kodzie HTML?

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

Jak mogę to zrobić?

Dzięki

Źródło

2013-06-20 user2426533

CSS: 'float: left;' and 'float: right'? – tymeJV

Znacznik '' został usunięty z HTML5. Proszę go usunąć i zastąpić odpowiednikiem CSS;) – lifetimes

Możesz użyć css, aby umieścić je w div i użyć odpowiedniego float: w prawo lub w lewo, aby mieć je po swoich stronach. szerokość div może być ustawiona tak, abyś miał "daleko w lewo" i "skrajnie prawy", jak chcesz. – Josh

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

jsFiddle example

pamiętać, że prawdopodobnie chcesz użyć stylu clear:both na dowolnych elementów przychodzi po kodzie podany tak, aby nie przemieszczał się bezpośrednio pod elementy pływające.

Źródło

2013-06-20 17:15:31 j08691

To działa całkiem dobrze. Dzięki. – Combine

Jedyny problem polega na tym, że rozmiar elementu div rodzicielskiego będzie większy, a to jest problem, jeśli używasz koloru tła, itp. – User

@User Co oznacza "rozmiar div jednostki rodzicielskiej"? – j08691

Chcesz użyć css float do tego, możesz umieścić go bezpośrednio w swoim kodzie.

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

Ale ja naprawdę sugerują nauki podstaw css i dzieląc całą swoją stylizację się do osobnego arkusza stylów i klas ruchu. Pomoże ci w przyszłości. Dobrym miejscem na rozpoczęcie jest w3schools lub, być może, późniejsza ścieżka, Mozzila Dev. Network (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; 
}

Źródło

2013-06-20 17:18:23

Można używać vertical-align i zmiennym.

W większości przypadków chcesz wyrównać w pionie: w środku, obraz.

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

Dla środkowej, definicja jest: Element jest umieszczony w środku elementu nadrzędnego.

Możesz więc zastosować to do wszystkich elementów w elemencie.

Źródło

2017-02-02 17:49:51 Illuminati

Jak umieścić tekst i obraz obok siebie w kodzie HTML?

Odpowiedz

Powiązane problemy