如何向上移动浮动元素而不使其与非浮动元素重叠？
[英]How can I move a floated element upwards without causing it to overlap with non-floated elements?
问题描述
I'm trying to add inline footnotes to a webpage using <aside> tags, like this:
我正在尝试使用<aside>标签向网页添加内联脚注，如下所示：
<p>Some text<sup>1</sup>.</p>
<aside><sup>1</sup> A footnote.</p>
<p>Some more text</p>
On small screens, I want this to display as written, with the aside following the paragraph with the footnote in it.在小屏幕上，我希望它以书面形式显示，并在段落后面加上脚注。 However, on wider monitors, I'd like the aside to float right, but this makes it level with the following paragraph, rather than the one containing the footnote it refers to.但是，在更宽的显示器上，我希望侧边向右浮动，但这使其与以下段落保持一致，而不是包含它所指的脚注的段落。 If I add position: relative; top: -100px;如果我添加position: relative; top: -100px; position: relative; top: -100px; to its CSS, the text wraps around its position before the move takes place rather than after, and it overlaps the paragraph it refers to.对于它的 CSS，文本在移动发生之前而不是之后围绕它的 position，并且它与它所指的段落重叠。
Is there a way to fix this, ideally in pure CSS but with JS if this isn't possible?有没有办法解决这个问题，理想情况下是纯 CSS 但如果这不可能，则使用 JS？
I've made a minimal JSFiddle to show the problem.我制作了一个最小的 JSFiddle来显示问题。
Thanks!谢谢！
2 个解决方案
解决方案1
0 2021-11-24 00:37:23
You could use flexbox or grid.您可以使用 flexbox 或网格。 I prefer grid in this case because it allows us to easily specify the relative widths of the two columns.在这种情况下，我更喜欢网格，因为它允许我们轻松指定两列的相对宽度。 grid-template-columns: 2fr 1fr means that I want the first column to be twice as wide as the second column. grid-template-columns: 2fr 1fr表示我希望第一列的宽度是第二列的两倍。
aside { padding: 16px; background: #999; } @media (min-width: 500px) {.paragraph-with-aside { display: grid; grid-template-columns: 2fr 1fr; grid-gap: 1em; } }
<html> <body> <div class="paragraph-with-aside"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae nisl efficitur, placerat nisi et, hendrerit purus. Proin tempor varius maximus. Morbi aliquet est et accumsan suscipit. Nunc fringilla bibendum lacus eu vestibulum. Cras sodales leo ut est faucibus rutrum. Donec sodales nisl at elit cursus vehicula. Nulla facilisi. Maecenas egestas tortor sit amet mauris faucibus iaculis<sup>1</sup>. Praesent eu vulputate orci. Nam tempor sollicitudin ante, at faucibus lorem lacinia quis. Pellentesque volutpat bibendum ligula, quis fermentum purus accumsan ac. Suspendisse ut velit ultricies, eleifend risus id, scelerisque urna. Nullam eu faucibus odio. Curabitur ac auctor lacus. Mauris vitae erat ac justo vehicula euismod.</p> <aside><sup>1</sup> Maecenas non magna id leo condimentum elementum nec quis urna. Nullam posuere erat libero, at dapibus odio condimentum a. Vestibulum sagittis aliquet urna, id porta justo posuere eu. Nulla facilisi. Fusce sollicitudin lorem a mauris gravida volutpat. Donec at feugiat diam. Vivamus ultrices metus id ipsum hendrerit efficitur.</aside> </div> <p>Nam neque libero, consequat sed maximus in, commodo quis lacus. Donec tristique velit eget ipsum ultricies, sit amet elementum ex ultrices. Ut tempus ornare mi, vitae ultrices tortor congue non. Suspendisse iaculis ligula nec lectus ultrices sollicitudin. Sed ut aliquet metus. Nunc aliquet ligula risus. Pellentesque ultricies laoreet lacus, eget vehicula justo aliquet nec. Maecenas eget sem lacus. Donec ut orci eu urna finibus consectetur. Mauris in nisi vitae nisi convallis dapibus non eget erat. Proin turpis ipsum, pellentesque a pellentesque nec, molestie scelerisque ipsum. Nullam semper sit amet ligula eu semper.</p> </body> </html>
解决方案2
0 2021-11-24 22:05:20
Okay, so maybe flexbox is better after all.好吧，也许 flexbox 毕竟更好。 So in the document we put the aside before the paragraph to which it relates and wrap them both in a div.因此，在文档中，我们将其放在与之相关的段落之前，并将它们都包装在一个 div 中。 Now we can float the aside on wide screens, but then on narrow screens we switch to a flex box and use the order property to move the aside after the paragraph.现在我们可以在宽屏上float aside ，但是在窄屏上我们切换到一个flex box并使用order属性将aside移到段落之后。
Just not sure how it will go if you have aside s in multiple sequential paragraphs.只是不确定如果您在多个连续段落中有 s ，它将如何aside 。
aside { float: right; width: 33%; padding: 16px; background: #999; box-sizing: border-box; margin: 0 0 10px 10px; } @media (max-width: 500px) {.paragraph-with-aside { display: flex; flex-direction: column; } aside { margin: 0; width: auto; order: 99; } }
<html> <body> <div class="paragraph-with-aside"> <aside><sup>1</sup> Maecenas non magna id leo condimentum elementum nec quis urna. Nullam posuere erat libero, at dapibus odio condimentum a. Vestibulum sagittis aliquet urna, id porta justo posuere eu. Nulla facilisi. Fusce sollicitudin lorem a mauris gravida volutpat. Donec at feugiat diam. Vivamus ultrices metus id ipsum hendrerit efficitur.</aside> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae nisl efficitur, placerat nisi et, hendrerit purus. Proin tempor varius maximus. Morbi aliquet est et accumsan suscipit. Nunc fringilla bibendum lacus eu vestibulum. Cras sodales leo ut est faucibus rutrum. Donec sodales nisl at elit cursus vehicula. Nulla facilisi. Maecenas egestas tortor sit amet mauris faucibus iaculis<sup>1</sup>. Praesent eu vulputate orci. Nam tempor sollicitudin ante, at faucibus lorem lacinia quis. Pellentesque volutpat bibendum ligula, quis fermentum purus accumsan ac. Suspendisse ut velit ultricies, eleifend risus id, scelerisque urna. Nullam eu faucibus odio. Curabitur ac auctor lacus. Mauris vitae erat ac justo vehicula euismod.</p> </div> <p>Nam neque libero, consequat sed maximus in, commodo quis lacus. Donec tristique velit eget ipsum ultricies, sit amet elementum ex ultrices. Ut tempus ornare mi, vitae ultrices tortor congue non. Suspendisse iaculis ligula nec lectus ultrices sollicitudin. Sed ut aliquet metus. Nunc aliquet ligula risus. Pellentesque ultricies laoreet lacus, eget vehicula justo aliquet nec. Maecenas eget sem lacus. Donec ut orci eu urna finibus consectetur. Mauris in nisi vitae nisi convallis dapibus non eget erat. Proin turpis ipsum, pellentesque a pellentesque nec, molestie scelerisque ipsum. Nullam semper sit amet ligula eu semper.</p> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.