时间戳

首页 > 解决方案 > 孩子不在父 div 内

html - 孩子不在父 div 内

问题描述

据我了解，包含在 div 中的按钮应该保留在其中。当我让它们显示为内联时就是这种情况，但是它们没有大小。当我将 display 设置为 inline-block 时，它们出现在页面底部，但这次大小正确。这是我第一次用 css 做一些事情，所以我对一切是如何工作的了解甚少。帮助将不胜感激。

html {
    height: 100%;
}

body {
    height: 100%;
}

.slider {
    width: 100%;
    height: 20%;
    overflow: hidden;
    position: fixed;
    text-align: center;
}

.image-container {
    width: 300%;
    height: 100%;
    position: relative;
    clear: both;
    transition: right 1s;
}

.slide {
    float: left;
    width: 33.333%;
}

#slide-1:target ~ .image-container {
    right: 0%;
}
#slide-1:target ~ .buttons > #button-1 {
    opacity: 0.5;
}
#slide-2:target ~ .image-container {
    right: 100%;
}
#slide-2:target ~ .buttons > #button-2 {
    opacity: 0.5;
}
#slide-3:target ~ .image-container {
    right: 200%;
}
#slide-3:target ~ .buttons > #button-3 {
    opacity: 0.5;
}

.buttons {
    position: relative;
    height: 1em;
    bottom: 1em;
}

.buttons > a {
    display: inline-block;
    height: 1em;
    width: 1em;
    margin: 0 1em;
    padding: 0;
    border-radius: 0.5em;
    background-color: lightgreen;
}
<html lang="eng">

<head>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
    <title>Slideshow</title>
</head>

<body>
    <section class="slider">
        <span id="slide-1"></span>
        <span id="slide-2"></span>
        <span id="slide-3"></span>
        <div class="image-container">
            <img src="{{ url_for('static', filename='images/gandalf.jpeg') }}" class="slide">
            <img src="{{ url_for('static', filename='images/mountains.jpeg') }}" class="slide">
            <img src="{{ url_for('static', filename='images/rivendale.jpeg') }}" class="slide">
        </div>
        <div class="buttons">
            <a id="button-1" href="#slide-1"></a>
            <a id="button-2" href="#slide-2"></a>
            <a id="button-3" href="#slide-3"></a>
        </div>
    </section>
    <section class="content">
        {% block content %}{% endblock %}
    </section>
</body>

</html>

图片：div

图片：按钮

标签： htmlcss

解决方案

如果有人遇到与屏幕截图相同的问题：确保将图像的高度设置为 100%，否则它可能会超出图像容器并搞砸一切。显然，图像不会自行缩放以适应 div。

推荐阅读