分页符在节标签内不起作用答案

【问题标题】：page breaks do not work within section tags分页符在节标签内不起作用
【发布时间】：2022-11-18 01:09:04
【问题描述】：

我正在用 django、html、css 和 javascript 制作一个项目，我正在构建一个包含部分和滚动捕捉的页面。我正在努力在我的标签之后但在我的标签之前在一个部分中下一行。当我尝试使用 break 标签时，没有任何反应，即使我使用多个。我最好的猜测是我试图在一个部分标签内做这件事

<body>
        <div class = "nav">
            <a href="#1">Home</a>
            <a href="#2">Education</a>
            <a href="#3">Projects</a>
            <a href="#4">Skills</a>
            <a href="#5">Experience</a>
        </div>
        <div class="scroll_container">
        <section id = "1" class = "home_section">
            <h1>Tyler Olson</h1>
            <img class="animate__animated animate__bounce" src="/static/down_arrow.png" alt="bouncing dodwn arrow" style="width:50px;height:50px;">
        </section>
        ...
      </div>
      </body>

我的目标是让箭头在该部分的底部中心反复弹跳，但我完全无法将其向下移动 rn，我什至尝试修改一些 css 值以移动 img 标签，但他们都没有做任何事情

【问题讨论】：

标签： html css

【解决方案1】：

这个答案可能对您有帮助吗？

<style>
    
    .animate__bounce {
        width: 100px;
        height: 100px;
        animation: bounce 0.5s;
        animation-direction: alternate;
        animation-timing-function: cubic-bezier(.5, 0.05, 1, .5);
        animation-iteration-count: infinite;
    }
      
    @keyframes bounce {
        from {
            transform: translate3d(0, 0, 0);
        }
        to {
            transform: translate3d(0, 200px, 0);
        }
    }
    /* Prefix Support */
      
    animate__bounce {
        -webkit-animation-name: bounce;
        -webkit-animation-duration: 0.5s;
        -webkit-animation-direction: alternate;
        -webkit-animation-timing-function: cubic-bezier(
        .5, 0.05, 1, .5);
        -webkit-animation-iteration-count: infinite;
    }
      
    @-webkit-keyframes bounce {
        from {
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        }
        to {
            -webkit-transform: translate3d(0, 200px, 0);
            transform: translate3d(0, 200px, 0);
        }
    }
</style>

【讨论】：

这似乎是一种为无限弹跳箭头制作动画的方法，但它似乎并没有将箭头向下移动到页面底部，这是我的主要目标如果你看我的图像，箭头出现在标题和我想将它移到该部分的最底部中心。但是 <br> 不起作用，CSS 中的顶部、底部等也不起作用。谢谢你的动画实现