Как разместить текст и изображение рядом друг с другом в HTML?

Я хочу, чтобы текст и изображение были рядом друг с другом, но я хочу, чтобы изображение находилось в крайнем левом углу экрана, и я хочу, чтобы текст находился в правом углу экрана. Это то, что я сейчас имею.

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

Как я могу это сделать?

Спасибо

Ответы

Ответ 1

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

Пример jsFiddle

Обратите внимание, что вы, вероятно, захотите использовать стиль clear:both для всех элементов, которые появляются после кода, который вы указали, чтобы он не скользил прямо под плавающими элементами.

Ответ 2

Вы хотите использовать css float для этого, вы можете поместить его прямо в свой код.

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

Но я бы действительно предложил изучить основы css и разделить все ваши стили в отдельной таблице стилей и использовать классы. Это поможет вам в будущем. Хорошее место для начала - w3schools или, возможно, позже по пути Mozzila Dev. Сеть (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;
}

Ответ 3

Вы можете использовать вертикальное выравнивание и плавание.

В большинстве случаев вы хотите выровнять по вертикали: посередине, изображение.

Вот тест: 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;

Для середины определение: Элемент помещается в середину родительского элемента.

Итак, вы можете применить это ко всем элементам внутри элемента.