Question

这是我的JSFiddle：http://jsfiddle.net/uh2ptg23/1/

如果展开“结果”框，您将看到每个彩色条应该是内嵌的彼此相邻的浮动。我的目标是让“起重机”在黄色的顶部，“Erognomic Lifting”在蓝色的顶部，以及“防坠落”在绿色的顶部。我遇到的另一个问题是，当调整窗口大小时，彩色条重叠在彼此之上。我不一定要这样，我希望它们保持100％的尺寸并且彼此保持距离并且内嵌浮动。

HTML：

<div class="sections">
<div class="cranes">
<img src="http://i.imgur.com/79SghD7.jpg" id="craneButton">
<span id="craneText">Cranes</span>
</div>
<div class="ergonomicLifting">
<img src="http://i.imgur.com/3HLElPO.jpg" id="ergoButton">
<span id="ergoText">Ergonomic Lifting</span>
</div>
<div class="fallProtection">
<img src="http://i.imgur.com/IOb8O3I.jpg" id="fallButton">
 <span id="fallText">Fall Protection</span>
</div>
</div>

CSS：

.sections {
width: 75%;
text-align: center;
margin: 0 auto;
}

.cranes {
float: left;
width: 33%;
position: relative;
}

.ergonomicLifting {
float: left;
width: 33%;
position: relative;
}

.fallProtection {
float: left;
width: 33%;
position: relative;
}

#craneText {
position: absolute;
z-index: 1000;
}

#fallText {
z-index: 1000;
position: absolute;
}

#ergoText {
z-index: 1000;
position: absolute;
}

Answer 1

JSFiddle Demo

<强> CSS

.sections {
    width: 75%;
    text-align: center;
    margin: 0 auto;
    overflow: hidden;
}

.sections div span {
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

.sections div {
    float: left;
    width:33%;
    position: relative;
}

.sections div img {
    max-width:100%;
}

Answer 2

您的<span>代码应位于<img>代码之前。

如何在图像上方获取文本并停止图像大小调整？

2 个答案: