Question

尝试在此图像滑块的底部浮动一个框。基本上滑块将有标题和标题，但我还想在图像的底部有一个框，它将使用PHP提取数据。

无论如何，我的问题是试图让带有文字的白框放在图像的底部并留在那里。如果用户减小屏幕尺寸，白色框应该跟随并保持在底部。

jsFiddle提供：http://jsfiddle.net/fkpe1py6/1/

<div id="homepage-slider-wrap" class="clr flexslider-container">
<div id="homepage-slider" class="flexslider">
    <ul class="slides clr">
        <li class="homepage-slider-slide">
            <div class="homepage-slide-inner container">
                <div class="homepage-slide-content">
                    <div class="homepage-slide-box">Float this box at the bottom of the image.</div>
                </div>
                <!-- .homepage-slider-content -->
            </div>
            <img src="http://wpexplorer-demos.com/elegant/wp-content/uploads/sites/83/2012/08/game.jpg" alt="">
        </li>
    </ul>
    <!-- .slides -->
</div>
<!-- .flexslider -->
</div>
<!-- #homepage-slider" -->

CSS（请参阅完整CSS的jsFiddle）

.homepage-slide-box {
float:left;
bottom: 0;
margin-top: 10px;
background: #31c68b;
font-size: 1.333em;
font-weight: 600;
color: #212121;
padding: 10px;
background: #fff;
}

感谢您的帮助！

Answer 1

我会改变一些事情：

我会将img标记放在.homepage-slide-content类div中（这有助于div知道图像的高度。）

然后在CSS中添加一些内容，以便您的其他幻灯片div模仿此高度。

<强> CSS

.homepage-slider-slide{
    display:block;
    position:relative;
}
.homepage-slider-slide img{
    display:block;
}
.homepage-slide-inner {
    position: relative;
    height:100%;
    width:100%;
}
.homepage-slide-content {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom:0;
    z-index: 9999;
}
.homepage-slide-box {
    position:absolute;
    bottom: 0;
    background: #31c68b;
    font-size: 1.333em;
    font-weight: 600;
    color: #212121;
    padding: 10px;
    background: #fff;
    width: 350px;
}

<强> JS FIDDLE DEMO

Answer 2

删除此css定位

.homepage-slide-inner {
   position: relative;
}

并添加此

.homepage-slider-slide {
    position: relative;
}

并将top: 50px的位置更改为.homepage-slide-content {bottom : 0}

<强> jFiddle

CSS Float Bottom of Image

2 个答案: