javascript - 如何使文本在 JQuery 幻灯片下方移动

Question

我正在制作一个 JQuery 切换/滑动类型菜单，并希望在 JQuery 向下滑动时移动下面的文本。

由于我是新手，我的代码可能会很乱。我提前为此道歉，但它几乎按照我需要的方式工作。

请在此处查看实际代码

Answer 1

只需将文本放在自己的位置div

<div id="textId">
    <!-- text elements here -->
</div>

然后使用下面的css

#textId {
    float: left;
    position: relative; 
    clear: both;
}

Answer 2

发生这种情况是因为您正在浮动两个滑块，使它们脱离正常的文档流。您可以对它下面的内容执行此操作：

<article>
    <h2>Lorem Ipsum</h2>
    <h3>Vestibulum tortor quam</h3>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.  </p>
</article>

然后用 CSS 防止它允许浮动：

article{
    clear: both;
}

Answer 3

您在关闭<ul>元素时遇到问题，重新打开它：

这个：

<ul>
    <li>Possession or use of Firearm without Licence Permit</li>
    <li>Unregistered Firearm</li>
    <li>Not keep Firearm Safe</li>
    <li>Discharge Firearm</li>
<ul>

应该：

<ul>
    <li>Possession or use of Firearm without Licence Permit</li>
    <li>Unregistered Firearm</li>
    <li>Not keep Firearm Safe</li>
    <li>Discharge Firearm</li>
</ul>

然后清除 div 浮动：

这是一个工作示例。

Answer 4

在菜单下方添加周围的内容。

然后使用以下 css 向 div 添加一个类：

clear: both;

编辑：确切地说，在#sliderright div 之后和开始Criminal Charges 元素之前，放置一个

<div style="clear:both;"></div>