html - 元素内嵌的图像和文本

Question

我正在为一家极限运动公司制作一个学校元素的网站，我想通过在类似元素的容器中添加一张图片后跟一些文本来展示这项运动。我对 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>

和 CSS

.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;
}

我试过这些设置，它们适用于这个设置，但它特定于图像大小和文本数量，我真的不想为另外 6 个不同的东西做同样的事情。

谢谢

Answer 1

我不太确定你想要得到什么，但可能更简单的方法是给你的图像“ float ”选项并从文本中删除 float (相对定位应该是不必要的)。当文本以内联方式显示时，它将使用图像周围的空间，并考虑到图像边距。