Question

我目前有一个网格布局，由图像滑块和带有方形div的文本滑块组成。 I have just asked a question如何在网格中为这些方块添加标题。现在，当div包含文本滑块时，我可以很好地完成这项工作。但是，当我尝试将相同的标题应用于包含图像滑块的div时，它不起作用，有人可以告诉我如何做到这一点。

CSS for DIVS

.slider2 { position: relative; }

.caption-box {
position: absolute;
right: 0;
height: 20px;
width:100px;
background-color: red; // change to suit
color: #fff; // change to suit
}
.trigger {
width: 200px;
height: 200px;
}

.static {
position: relative;
width: 200px;
height: 200px;
text-align: center;
font-size: 0;
border-style: solid;
border-width: 1px;
border-color: #CCCCB2;
border-radius: 5px; 
}

以下是文字幻灯片DIV的HTML代码，其中字幕DIV工作正常

    <div class="trigger">
        <div class="slider2">
<div style="border-style: solid; border-width: 1px; border-color: #CCCCB2; border-radius: 5px; height: 200px; width: 200px; color: #CCC;" class="just_text"><div class="caption-box">Monthly Plan</div>As part of our budget graphic design service we also offer a money saving monthly advertising schedule option. Whether it be for 6, 9 or 12 months we will remove all stress of advertising from your office leaving you to concentrate on your customers.    </div>
<div style="border-style: solid; border-width: 1px; border-color: #CCCCB2; border-radius: 5px; height: 200px; width: 200px; color: #CCC;" class="just_text"><div class="caption-box">Web Updates</div>Our website design service also includes a money saving update scheme. For a monthly fee you can have updates to keep your website fresh and dynamic. No other company can offer this service.</div>
 </div>
    </div>

以下是图片幻灯片的HTML代码，我无法使字幕DIV工作

  <div class="trigger">
        <div tabindex="0" class="maincontent static"><div class="slider2">
<img src="client9.jpg" height="200" width="200" />
<img src="client10.jpg" height="200" width="200" />
<img src="client11.jpg" height="200" width="200" />
<img src="client2.jpg" height="200" width="200" />
</div></div>
    </div>

JAVASCRIPT

<script>
$(function(){
$('.slider').sss({
slideShow : true, // Set to false to prevent SSS from automatically animating.
startOn : 0, // Slide to display first. Uses array notation (0 = first slide).
transition : 400, // Length (in milliseconds) of the fade transition.
speed : 20000, // Slideshow speed in milliseconds.
showNav : true // Set to false to hide navigation arrows.
});
$('.slider2').sss({
 slideShow : true, // Set to false to prevent SSS from automatically animating.
 startOn : 0, // Slide to display first. Uses array notation (0 = first slide).
 transition : 400, // Length (in milliseconds) of the fade transition.
 speed : 10000, // Slideshow speed in milliseconds.
 arrows : false // Set to false to hide navigation arrows.
 });
 });
 </script>

CSS，JAVASCRIPT链接来调用SSS.CSS

.sss {
height: 0;
margin: 0; 
padding: 0;
position: relative;
display: block;
overflow: hidden;
}

.ssslide {
width: 100%;
margin: 0;
padding: 0;
position: absolute;
top: 0;
left: 0;
display: none;
overflow: hidden;
}

.ssslide img {
max-width: 100%;
height: auto;
margin: 0;
padding: 0;
position: relative;
display: block;
}

.sssnext, .sssprev {
width: 25px;
height: 100%;
margin: 0;
position: absolute;
top: 0;
background: url('images/arr.png') no-repeat;
}

.sssprev {
left: 3%;
background-position: 0 50%;
}

.sssnext {
right: 3%;
background-position: -26px 50%;
}

.sssprev:hover, .sssnext:hover {
cursor: pointer;
}.row .col .trigger .slider2 .just_text {
color: #CCC;
}

Answer 1

图片的代码不完整，必须创建我自己的版本才能复制问题。但一旦完成，问题很容易找到。你可以看到它正在使用这个JSFiddle：http://jsfiddle.net/Lbrcbhxw/2/（我冒昧地清理它以便更容易阅读）。

问题是.static有一个font-size:0，使文字不可见。删除它（或者不用图像包裹div），问题就解决了。

.static {
    position: relative;
    width: 200px;
    height: 200px;
    text-align: center;
    /* font-size: 0; */
    border-style: solid;
    border-width: 1px;
    border-color: #CCCCB2;
    border-radius: 5px; 
}

文字版本并非围绕.static，因此它正确显示并且没有问题。

为包含滑块的Div添加Div标题（跟进前一个问题）

1 个答案: