it-swarm.com.ru

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

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

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

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

Спасибо

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

Пример jsFiddle

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

26
j08691

Для этого вы хотите использовать 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. 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;
}
4
Dominic Green

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

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

Вот тест: http://www.w3schools.com/cssref/tryit.asp?filename=trycss_vertical-align

вертикальное выравнивание: базовая линия | длина | суб | супер | верх | текст-верх | середина | низ | текст-низ | начальный | наследовать;

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

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

0
Illuminati