Question

我通过给出图像位置创建幻灯片库：绝对。问题是，我希望缩略图的标题和标题位于其下方，信息位于缩略图下方，而不是下方。

我正在使用高级自定义字段及其图库字段插件。

<div id="slideshow_thumb">  


    <h4>view images</h4>

        <?php 
        $images = get_field('gallery'); 
        $image_1 = $images[0]; 
        ?>    
         <?php foreach( $images as $image ): ?>


        <a href="<?php echo $image['url']; ?>" rel="fancybox"><img src="<?php echo $image_1['url']; ?>" /></a>


        <?php endforeach; ?>

        <div id="slideshow_thumb_info">
        <?php echo $image_1['title']; ?><br>
        <?php echo $image_1['caption']; ?>
        </div>


</div>

CSS

#slideshow_thumb {
width:22%;
float:left;
margin-bottom:0;
padding-bottom:0;
margin-right:3%;
}

#slideshow_thumb img {
width:22%;
height:auto;
position:absolute;
}

#slideshow_thumb a:first-of-type img{
z-index:100;
}

Answer 1

我通过隐藏除第一个图像之外的所有其他图像而不是使用position：absolute来解决它。

所以我的CSS现在是：

#slideshow_thumb {
width:22%;
float:left;
margin-bottom:0;
padding-bottom:0;
margin-right:3%;
}

#slideshow_thumb img {
display:none;
width:100%;
height:auto;
}

#slideshow_thumb a:first-of-type img{
display:block;
}

标题低于绝对定位图像

1 个答案: