如何在浮动组件下方设置页脚?
How to set footer below float component?
我在网页末尾有一个粘性页脚,但在我插入 Twitter 提要的页面上,它无法正常工作。页脚遍历 Twitter 提要而不是位于下方。
这是文本和 Twitter 提要的代码:
<div>
<div style="float:left;width:80%;padding-right:20px">
La Plataforma de Prácticas Externas..
</div>
<div style="float:right;position:absolute;display:inline-block;">
<a class="twitter-timeline" data-lang="es" data-width="300" data-height="800" data-theme="light" data-link-color="#2B7BB9" href="https://twitter.com/X?ref_src=twsrc%5Etfw">Tweets by X</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
</div>
这是页脚的代码:
<div align="center" style="position: sticky;width: 100%;bottom: 0%;clear: both;padding-top: 20px;">
<hr />
<p class="small">Copyright © <fmt:formatDate value="${date}" pattern="yyyy" /> Footer </b>
</div>
这是结果:
我想要实现的是页脚位于 Twitter 提要框下方
编辑:
@Sathiraumesh 的回答结果是:
我正在寻找的预览是这样的:
从您的应用程序中删除此代码中的postion: absolute
<div style="float:right;position:absolute;display:inline-block;">
<a class="twitter-timeline" data-lang="es" data-width="300" data-height="800" data-theme="light" data-link-color="#2B7BB9" href="https://twitter.com/X?ref_src=twsrc%5Etfw">Tweets by X</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
同时从页脚中删除 position: sticky
<div align="center" style="position: sticky;width: 100%;bottom: 0;clear: both;padding-top: 20px;">
<hr />
<p class="small">Copyright © <fmt:formatDate value="${date}" pattern="yyyy" /> Footer </b>
</div>
要将推特框放在前面,请在推特框中添加z-index:3
<div style="z-index:3;float:right;position:absolute;display:inline-block;">
<a class="twitter-timeline" data-lang="es" data-width="300" data-height="800" data-theme="light" data-link-color="#2B7BB9" href="https://twitter.com/X?ref_src=twsrc%5Etfw">Tweets by X</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
我在网页末尾有一个粘性页脚,但在我插入 Twitter 提要的页面上,它无法正常工作。页脚遍历 Twitter 提要而不是位于下方。
这是文本和 Twitter 提要的代码:
<div>
<div style="float:left;width:80%;padding-right:20px">
La Plataforma de Prácticas Externas..
</div>
<div style="float:right;position:absolute;display:inline-block;">
<a class="twitter-timeline" data-lang="es" data-width="300" data-height="800" data-theme="light" data-link-color="#2B7BB9" href="https://twitter.com/X?ref_src=twsrc%5Etfw">Tweets by X</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
</div>
这是页脚的代码:
<div align="center" style="position: sticky;width: 100%;bottom: 0%;clear: both;padding-top: 20px;">
<hr />
<p class="small">Copyright © <fmt:formatDate value="${date}" pattern="yyyy" /> Footer </b>
</div>
这是结果:
我想要实现的是页脚位于 Twitter 提要框下方
编辑:
@Sathiraumesh 的回答结果是:
我正在寻找的预览是这样的:
从您的应用程序中删除此代码中的postion: absolute
<div style="float:right;position:absolute;display:inline-block;">
<a class="twitter-timeline" data-lang="es" data-width="300" data-height="800" data-theme="light" data-link-color="#2B7BB9" href="https://twitter.com/X?ref_src=twsrc%5Etfw">Tweets by X</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
同时从页脚中删除 position: sticky
<div align="center" style="position: sticky;width: 100%;bottom: 0;clear: both;padding-top: 20px;">
<hr />
<p class="small">Copyright © <fmt:formatDate value="${date}" pattern="yyyy" /> Footer </b>
</div>
要将推特框放在前面,请在推特框中添加z-index:3
<div style="z-index:3;float:right;position:absolute;display:inline-block;">
<a class="twitter-timeline" data-lang="es" data-width="300" data-height="800" data-theme="light" data-link-color="#2B7BB9" href="https://twitter.com/X?ref_src=twsrc%5Etfw">Tweets by X</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>