Html a中的图像和文字内嵌<；部门>；要素

我正在为一家极限运动公司为一个学校项目制作一个网站，我想通过在一个容器状元素中有一张图片和一些文字来展示运动。我对HTML和CSS比较陌生

这是HTML

<div class="sports" "spacing"> 
    <img src="images/skydive.jpg" class="thumbnail" alt="" /> 
    <p class="float" > Skydiving is one of those things everybody wants to experiance and is on many peoples bucket list. It is the ultimate thrill hurtaling towards the earth with no restrictions. We have a number of techniques avalible including         Tandem, Static line and solo! </p> 
</div>

我已经使用过这些设置，它们适用于这一个，但具体取决于图像大小和文本量，我真的不想在另外6个不同的事情上做同样的事情

---

谢谢

我不太确定您想要得到什么，但可能更简单的方法是给您的图像提供“浮动”选项，并从文本中删除浮动（相对定位应该是不必要的）。当文本以内联方式显示时，它将在图像周围使用空格，与图像边距有关。

。

.sports {
    height:230px;
    width:900px;
    background-color:#f1f1f1;
    margin-right:auto;
    margin-left:auto;
    margin-bottom: 20px;
    display:table;
}

.thumbnail {
    max-height: 200px;
    margin-top:15px;
    margin-bottom:15px;
    margin-left: 15px;
    display:inline-block;
}

.float {
    text-align:center;
    display:inline-block;
    width:410px;
    position:relative;
    top:-71px;
    padding-left:80px;
}