html - CSS float 图像底部

Question

尝试在此图像 slider 的底部 float 一个框。本质上， slider 将有一个标题和标题，但我还想在图像底部有一个框，它将使用 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