将文本移动到图像旁边 paragraph/center 的顶部

Question

我有一张图片，我想在图片右侧添加标题和基本描述。我尝试使用位置：相对，绝对。填充和边距：0px.

link是：URL

游戏"Rock, Paper, Scissors"和"Miji"，游戏标题应该在右边图片的顶部，然后我会在下面添加游戏说明。

谢谢！

Answer 1

在您的页面上播放项目而不必弄乱特定的边距和填充（在繁忙的页面上可能会变得混乱）的一种简单方法是选择您的位置（相对、绝对等），然后使用左，向右和顶部以在页面上移动它。

例如

.exampleClass {
position: relative;
left: 20px;
top: 5px;
}

尝试使用数字和位置类型，直到您很好地理解它们如何影响项目并且您应该可以毫无问题地调整页面上对象的位置。

Answer 2

<a href="Games/RPS.html"><img src="Games/RPS.jpg" width="15%" height="15%" alt="Rock, Paper, Scissors"></a>

先拿这两个标签

 <span id="gameTitle">Rock, Paper, Scissors, Shoot</span>

交替使用两个标签！

<span id="gameTitle" style=" float: left;">Rock, Paper, Scissors, Shoot</span>

将跨度设置为 style="float: left"; 在这些 <a href.... 和 <span id=....

之间添加 <br/>

你的输出将是 http://myslambook.pe.hu/demo.png

Answer 3

您好，根据我的理解，您正在尝试以下类似的操作 https://jsfiddle.net/up1v5j0z/28/

<ul>
    <li><div class="content"><img src="http://i.stack.imgur.com/FZVih.jpg?s=328&g=1" height="200px";><h4>Roshan Padole </h4><p>Senior Software Engineer and DigitalMarketing Experts</br>Management of the manpower with effective positive results. </p></div><br style="clear:both"></li>
</ul>

 .content img {float:left}


[https://jsfiddle.net/up1v5j0z/28/][1]

Hope this will help you

将文本移动到图像旁边 paragraph/center 的顶部

Moving text to top of paragraph/center next to image

html

css

position

image

css-position