0

我正在为一个学校项目的极限运动公司制作一个网站，我想通过在一个类似元素的容器中放置一张图片和一些文本来展示这项运动。我对 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 种不同的东西做同样的事情。

谢谢

4

1 回答 1

1

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

于 2013-03-08T19:25:05.807 回答