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

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

图像和文本内嵌在<div>元素</div>中

1 个答案: