Question

我知道可以通过使用绝对位置并添加＆＃34; bottom：0;＆＃34;来将文本放在块的底部，但对我来说是不可能的。我试了很久，但我不能。我目前正在制作CSS3中的幻灯片，我将我的4张图片分组到绝对位置。

这是我的HTML代码：

<h1 id="welcome-to">Welcome to! Web site for highly customized styles for the <a href="http://xenforo.com" target="_blank" style="border-bottom: 2px solid;">XenForo forum software</a>.</h1>
<h1 id="all-available-styles">All available styles</h1>
<div id="slideshow">
    <div id="slideshow-container">
        <div class="slideshow-content">
            <img src="images/image-1.jpg" alt="Image 1">
            <span>First Image</span>
        </div>
        <div class="slideshow-content">
            <img src="images/image-2.jpg" alt="Image 2">
            <span>Second Image</span>
        </div>
        <div class="slideshow-content">
            <img src="images/image-3.jpg" alt="Image 3">
            <span>Third Image</span>
        </div>
        <div class="slideshow-content">
            <img src="images/image-4.jpg" alt="Image 4">
            <span>Fourth Image</span>
        </div>
    </div>
</div>

和我的幻灯片CSS代码：

#slideshow
{
    text-align: center;
    height: 440px;
}

#slideshow #slideshow-container
{
    position: relative;
}

#slideshow #slideshow-container img
{
    position: absolute;
    right: 0;
    left: 0;
    margin: 0 auto;
    pointer-events: none;
}

#slideshow #slideshow-container span
{
    position: absolute;
    right: 0;
    left: 0;
    font-size: 15px;
}

我使用span来包围我的文字并添加＆＃34; bottom：0;＆＃34;到：

#slideshow #slideshow-container span
{
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
    font-size: 15px;
}

文字仍附在顶部：http://i.stack.imgur.com/SyzTL.png

我该怎么办？

Answer 1

这对我来说很有用。

#slideshow #slideshow-container {
position: static;
}

绝对位置：我无法将我的文字放在CSS3幻灯片的底部

1 个答案: