英文:
A way to float inline elements *below* their container
问题
我正在构建一个用于撰写技术文档的模板。我希望尽量减少JavaScript的使用。我包括了一个最小示例
当屏幕宽度较大时，它将引用浮动在span标签中显示在左边距处。当屏幕变窄（例如，在移动设备上）时，没有足够的数字空间来显示左边距，我希望在段落后立即显示引用（或者，也许在<section>的末尾）。我看到其他人建议使用绝对定位来实现这一点，但我认为在我的情况下这不起作用，因为一个段落中可能有多个引用。另一个选择是将一个段落的所有边距注释放在一个<aside>块中，然后将其浮动到边距。出于各种原因，我希望能够将span标签尽可能靠近它所引用的文本。在完美的世界中，我希望尽可能保持HTML的语义，所以我不想将每个段落包装在另一个div标签或表格标签中。
我已经能够接近一个解决方案（在Codepen示例中显示），即将段落显示为flexbox，并更改引用span的顺序，以便它们显示在主文本之后。这几乎可以工作，但是通过将段落更改为flexbox，每个span之间的连续文本都会呈块状显示，这会创建尴尬的换行。我尝试了许多CSS技巧，试图使其余的文本像没有span标签时一样正常换行，但我开始相信这是不受支持的（也许可以通过一些聪明的CSS选择器display: content来实现）。
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
article {
margin-left: 25%;
padding: 5px;
}
main {
margin-left: auto;
margin-right: auto;
max-width: 800px;
flex-wrap: wrap;
}
section {
margin-top: 40px;
}
h1 {
width: calc(125% - 10px);
margin-left: -25%;
text-align: center;
}
h2 {
width: calc(125%);
margin-left: calc(-33%);
border-top: 1px solid gray;
padding-top: 10px;
padding-left: 40px;
}
span.ref {
float: left;
clear: both;
width: calc(33% - 8px);
margin-left: -33%;
hyphens: auto;
font-size: 14px;
color: #666;
text-align: left;
}
@media only screen and (max-width: 500px) {
article {
margin-left: 0px;
}
h1, h2 {
margin-left: 0;
padding-left: 0;
width: 100%;
}
p {
display: flex;
flex-direction: column;
}
span.ref {
order: 2;
float: none;
margin-left: 0px;
}
p > span.ref:first-of-type {margin-top: 10px;}
}
<!-- language: lang-html -->
<body>
<main>
<article>
<h1>Document Title</h1>
<section>
<h2>First section of the document</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras fringilla porta est nec rhoncus. Vestibulum ultricies molestie ante, vel fringilla turpis tempor at. Maecenas eu leo justo. Aliquam scelerisque metus in massa hendrerit [1], <span class="ref">[1] Wikipedia. </span>non condimentum augue pharetra. Etiam in lorem eu nibh sagittis [2] <span class="ref">[2] A fancy textbook</span> lacinia sit amet eu odio. Quisque ultricies lacinia dignissim. Suspendisse blandit urna justo, et blandit metus tincidunt at. Quisque vel varius enim.
</p>
<p>
Aenean cursus vestibulum libero, eu vulputate nisi efficitur sit amet. Praesent quis metus ac leo eleifend tempus. Praesent ac mauris eleifend, luctus ligula vel, interdum lectus. Donec iaculis in est non iaculis. Nullam vulputate, lorem quis placerat condimentum, risus lectus feugiat neque, id auctor augue elit ut enim. Donec vel rutrum massa. Nunc laoreet nulla et eleifend facilisis. Morbi scelerisque velit sit amet libero viverra mattis. Vivamus non porta neque, et rhoncus mi. In lectus nisl, faucibus nec sem sed, ullamcorper commodo ante. Aliquam ac massa imperdiet, viverra lacus eget, convallis ex. Phasellus tempus lacinia enim id tincidunt.
</p>
</section>
<section>
<h2>A second section</h2>
</section>
</article>
</main>
</body>
<!-- end snippet -->
英文:
I'm building a template for writing some technical documentation. I'd love to do this with as little Javascript as possible. I am including a minimal example
When the screen is wide, it floats references in span tags to the left margin. When the screen gets narrow (e.g., on mobile devices), there's not enough digital real estate to display a left margin, and I would like to display the references immediately after the paragraph (or, perhaps, at the end of the <section>). I have seen other people suggest doing this with some absolute positioning, but I don't think that works in my case, since there might be multiple references in a single paragraph. Another option that I've seen presented is to put all of the margin notes for a paragraph in a single <aside> block that gets floated to the margin. For various reasons, I'd love to be able to put the span tag as close as possible to the text that it refers to. In a perfect world, I want to keep the html as semantic as possible, so I don't want to wrap each paragraph in another div tag or table tag.
One near solution that I've been able to do (shown in the Codepen example) is to display the paragraph as a flexbox, and change the order of the reference spans so that they display after the main text. This almost works, except that by changing the paragraph to display as a flexbox, every continuous line of text between a span gets rendered as a block, which creates awkward line breaks. I've tried a number of CSS tricks to try to get the remaining text to wrap as it normally would if there were no span tags, but I'm beginning to be convinced that this is not supported (perhaps with some clever CSS selectors display: content)
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
article {
margin-left: 25%;
padding: 5px;
}
main {
margin-left: auto;
margin-right: auto;
max-width: 800px;
flex-wrap:wrap;
}
section {
margin-top: 40px;
}
h1 {
width: calc(125% - 10px);
margin-left: -25%;
text-align: center;
}
h2 {
width: calc(125%);
margin-left: calc(-33%);
border-top: 1px solid gray;
padding-top: 10px;
padding-left: 40px;
}
span.ref {
float: left;
clear: both;
width: calc(33% - 8px);
margin-left: -33%;
hyphens: auto;
font-size: 14px;
color: #666;
text-align: left;
}
@media only screen and (max-width: 500px) {
article {
margin-left: 0px;
}
h1, h2 {
margin-left: 0;
padding-left: 0;
width: 100%;
}
p {
display: flex;
flex-direction: column;
}
span.ref {
order: 2;
float: none;
margin-left: 0px;
}
p > span.ref:first-of-type {margin-top: 10px;}
}
<!-- language: lang-html -->
<body>
<main>
<article>
<h1>Document Title</h1>
<section>
<h2>First section of the document</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras fringilla porta est nec rhoncus. Vestibulum ultricies molestie ante, vel fringilla turpis tempor at. Maecenas eu leo justo. Aliquam scelerisque metus in massa hendrerit [1], <span class="ref">[1] Wikipedia. </span>non condimentum augue pharetra. Etiam in lorem eu nibh sagittis [2] <span class="ref">[2] A fancy textbook</span> lacinia sit amet eu odio. Quisque ultricies lacinia dignissim. Suspendisse blandit urna justo, et blandit metus tincidunt at. Quisque vel varius enim.
</p>
<p>
Aenean cursus vestibulum libero, eu vulputate nisi efficitur sit amet. Praesent quis metus ac leo eleifend tempus. Praesent ac mauris eleifend, luctus ligula vel, interdum lectus. Donec iaculis in est non iaculis. Nullam vulputate, lorem quis placerat condimentum, risus lectus feugiat neque, id auctor augue elit ut enim. Donec vel rutrum massa. Nunc laoreet nulla et eleifend facilisis. Morbi scelerisque velit sit amet libero viverra mattis. Vivamus non porta neque, et rhoncus mi. In lectus nisl, faucibus nec sem sed, ullamcorper commodo ante. Aliquam ac massa imperdiet, viverra lacus eget, convallis ex. Phasellus tempus lacinia enim id tincidunt.
</p>
</section>
<section>
<h2>A second section</h2>
</section>
</article>
</main>
</body>
<!-- end snippet -->
答案1
得分: 1
由于您不想要JavaScript，我能想到的唯一方法是将引用复制一份，一个只在桌面上可见，另一个只在移动设备上可见：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
article {
margin-left: 25%;
padding: 5px;
}
main {
margin-left: auto;
margin-right: auto;
max-width: 800px;
flex-wrap: wrap;
}
section {
margin-top: 40px;
}
h1 {
width: calc(125% - 10px);
margin-left: -25%;
text-align: center;
}
h2 {
width: calc(125%);
margin-left: calc(-33%);
border-top: 1px solid gray;
padding-top: 10px;
padding-left: 40px;
}
span.ref {
float: left;
clear: both;
width: calc(33% - 8px);
margin-left: -33%;
hyphens: auto;
font-size: 14px;
color: #666;
text-align: left;
}
.ref-mobile-container {
display: none;
}
@media only screen and (max-width: 700px) {
article {
margin-left: 0px;
}
h1,
h2 {
margin-left: 0;
padding-left: 0;
width: 100%;
}
span.ref.desktop {
display: none;
}
.ref-mobile-container {
display: block;
margin-top: 10px;
}
span.ref {
display: inline;
float: none;
margin-left: 0;
}
}
</style>
</head>
<body>
<main>
<article>
<h1>Document Title</h1>
<section>
<h2>文档的第一部分</h2>
<p class="">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras fringilla porta est nec rhoncus. Vestibulum
ultricies molestie ante, vel fringilla turpis tempor at. Maecenas eu leo justo. Aliquam scelerisque metus in
massa hendrerit [1],
<span class="desktop ref">[1] Wikipedia. </span>non condimentum augue pharetra. Etiam in lorem eu nibh
sagittis [2] <span class="desktop ref">[2] 一本花哨的教科书</span> lacinia sit amet eu odio. Quisque
ultricies lacinia dignissim. Suspendisse blandit urna justo, et blandit metus tincidunt at. Quisque vel
varius enim.
</p>
<div class="ref-mobile-container">
<span class="ref">[1] Wikipedia. </span>
<span class="ref">[2] 一本花哨的教科书</span>
</div>
<p>
Aenean cursus vestibulum libero, eu vulputate nisi efficitur sit amet. Praesent quis metus ac leo eleifend
tempus. Praesent ac mauris eleifend, luctus ligula vel, interdum lectus. Donec iaculis in est non iaculis.
Nullam vulputate, lorem quis placerat condimentum, risus lectus feugiat neque, id auctor augue elit ut enim.
Donec vel rutrum massa. Nunc laoreet nulla et eleifend facilisis. Morbi scelerisque velit sit amet libero
viverra mattis. Vivamus non porta neque, et rhoncus mi. In lectus nisl, faucibus nec sem sed, ullamcorper
ex. Phasellus tempus lacinia enim id tincidunt.Aenean cursus vestibulum libero, eu vulputate nisi efficitur
sit amet. Praesent quis metus ac leo eleifend tempus. Praesent ac mauris eleifend, luctus ligula vel,
interdum lectus. Donec iaculis in est non iaculis. Nullam vulputate, lorem quis placerat condimentum, risus
lectus feugiat neque, id auctor augue elit ut enim. Donec vel rutrum massa. Nunc laoreet nulla et eleifend
facilisis. Morbi scelerisque velit[3] <span class="desktop ref">[3] ChatGPT. </span> sit amet libero viverra
mattis. Vivamus non porta neque, et rhoncus mi. In lectus nisl, faucibus nec sem sed, ullamcorper commodo
ante. Aliquam ac massa imperdiet, viverra[4] <span class="desktop ref">[4] Stack Overflow. </span> lacus
eget, convallis ex. Phasellus tempus lacinia enim id tincidunt.Aenean cursus vestibulum libero, eu vulputate
nisi efficitur sit amet. Praesent quis metus ac leo eleifend tempus. Praesent ac mauris eleifend, luctus
ligula vel,[5] <span class="desktop ref">[5] Bing. </span> interdum lectus. Donec iaculis in est non
iaculis. Nullam vulputate, lorem quis placerat condimentum, risus lectus feugiat neque, id auctor augue elit
ut enim. Donec vel rutrum massa. Nunc laoreet nulla et eleifend facilisis. Morbi scelerisque velit sit amet
libero viverra mattis. Vivamus non porta neque, et rhoncus mi. In lectus nisl, faucibus nec sem sed,
ullamcorper commodo ante. Aliquam ac massa imperdiet, viverra lacus eget, convallis ex. Phasellus tempus
lacinia enim id tincidunt.
</p>
<div class="ref-mobile-container">
<span class="ref">[3] ChatGPT. </span>
<span class="ref">[4] Stack Overflow. </span>
<span class="ref">[5] Bing. </span>
</div>
</section>
<section>
<h2>第二部分</h2>
</section>
</article>
</main>
</body>
</html>
英文:
As you dont want javascript, the only way I could think of is to have the references duplicated, one visible only for desktop other visible only for mobile:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
article {
margin-left: 25%;
padding: 5px;
}
main {
margin-left: auto;
margin-right: auto;
max-width: 800px;
flex-wrap: wrap;
}
section {
margin-top: 40px;
}
h1 {
width: calc(125% - 10px);
margin-left: -25%;
text-align: center;
}
h2 {
width: calc(125%);
margin-left: calc(-33%);
border-top: 1px solid gray;
padding-top: 10px;
padding-left: 40px;
}
span.ref {
float: left;
clear: both;
width: calc(33% - 8px);
margin-left: -33%;
hyphens: auto;
font-size: 14px;
color: #666;
text-align: left;
}
.ref-mobile-container {
display: none;
}
@media only screen and (max-width: 700px) {
article {
margin-left: 0px;
}
h1,
h2 {
margin-left: 0;
padding-left: 0;
width: 100%;
}
span.ref.desktop {
display: none;
}
.ref-mobile-container {
display: block;
margin-top: 10px;
}
span.ref {
display: inline;
float: none;
margin-left: 0;
}
}
</style>
</head>
<body>
<main>
<article>
<h1>Document Title</h1>
<section>
<h2>First section of the document</h2>
<p class="">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras fringilla porta est nec rhoncus. Vestibulum
ultricies molestie ante, vel fringilla turpis tempor at. Maecenas eu leo justo. Aliquam scelerisque metus in
massa hendrerit [1],
<span class="desktop ref">[1] Wikipedia. </span>non condimentum augue pharetra. Etiam in lorem eu nibh
sagittis [2] <span class="desktop ref">[2] A fancy textbook</span> lacinia sit amet eu odio. Quisque
ultricies lacinia dignissim. Suspendisse blandit urna justo, et blandit metus tincidunt at. Quisque vel
varius enim.
</p>
<div class="ref-mobile-container">
<span class="ref">[1] Wikipedia. </span>
<span class="ref">[2] A fancy textbook</span>
</div>
<p>
Aenean cursus vestibulum libero, eu vulputate nisi efficitur sit amet. Praesent quis metus ac leo eleifend
tempus. Praesent ac mauris eleifend, luctus ligula vel, interdum lectus. Donec iaculis in est non iaculis.
Nullam vulputate, lorem quis placerat condimentum, risus lectus feugiat neque, id auctor augue elit ut enim.
Donec vel rutrum massa. Nunc laoreet nulla et eleifend facilisis. Morbi scelerisque velit sit amet libero
viverra mattis. Vivamus non porta neque, et rhoncus mi. In lectus nisl, faucibus nec sem sed, ullamcorper
ex. Phasellus tempus lacinia enim id tincidunt.Aenean cursus vestibulum libero, eu vulputate nisi efficitur
sit amet. Praesent quis metus ac leo eleifend tempus. Praesent ac mauris eleifend, luctus ligula vel,
interdum lectus. Donec iaculis in est non iaculis. Nullam vulputate, lorem quis placerat condimentum, risus
lectus feugiat neque, id auctor augue elit ut enim. Donec vel rutrum massa. Nunc laoreet nulla et eleifend
facilisis. Morbi scelerisque velit[3] <span class="desktop ref">[3] ChatGPT. </span> sit amet libero viverra
mattis. Vivamus non porta neque, et rhoncus mi. In lectus nisl, faucibus nec sem sed, ullamcorper commodo
ante. Aliquam ac massa imperdiet, viverra[4] <span class="desktop ref">[4] Stack Overflow. </span> lacus
eget, convallis ex. Phasellus tempus lacinia enim id tincidunt.Aenean cursus vestibulum libero, eu vulputate
nisi efficitur sit amet. Praesent quis metus ac leo eleifend tempus. Praesent ac mauris eleifend, luctus
ligula vel,[5] <span class="desktop ref">[5] Bing. </span> interdum lectus. Donec iaculis in est non
iaculis. Nullam vulputate, lorem quis placerat condimentum, risus lectus feugiat neque, id auctor augue elit
ut enim. Donec vel rutrum massa. Nunc laoreet nulla et eleifend facilisis. Morbi scelerisque velit sit amet
libero viverra mattis. Vivamus non porta neque, et rhoncus mi. In lectus nisl, faucibus nec sem sed,
ullamcorper commodo ante. Aliquam ac massa imperdiet, viverra lacus eget, convallis ex. Phasellus tempus
lacinia enim id tincidunt.
</p>
<div class="ref-mobile-container">
<span class="ref">[3] ChatGPT. </span>
<span class="ref">[4] Stack Overflow. </span>
<span class="ref">[5] Bing. </span>
</div>
</section>
<section>
<h2>A second section</h2>
</section>
</article>
</main>
</body>
</html>
<!-- end snippet -->
答案2
得分: 1
以下是您要翻译的内容：
"I had another crack and was able to get it working with a single version (with some caveats). No need to duplicate the references or adjust the base HTML at all.
Note: I'm using :has selector that is not currently supported in FireFox. 在 Firefox 上不支持的 :has 选择器。 
Spans need to be 'yanked' right out of their default inline spot with position: absolute to have the residual paragraph text move up where the reference spans were previously."
请注意，这是您要翻译的文本内容，不包括代码部分。
英文:
I had another crack and was able to get it working with a single version (with some caveats). No need to duplicate the references or adjust the base HTML at all.
Note: I'm using :has selector that is not currently supported in FireFox. https://stackoverflow.com/questions/73936048/how-do-you-enable-has-selector-on-firefox
Spans need to be 'yanked' right out of their default inline spot with position: absolute to have the residual paragraph text move up where the reference spans were previously.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>References in left column for desktop. References below paragraphs for mobile.</title>
<style>
:root {
--main-max-width: 800px;
--citation-col-width: 180px;
--span-reference-top: 1.3rem;
}
html {
font-size: 16px;
}
body {
margin: 0;
padding-top: 1rem;
padding-bottom: 1rem;
font-family: sans-serif;
font-size: 1rem;
line-height: 1.35;
background: #fafafa;
color: #1a1a1a;
}
article {
padding: 1rem;
background: #fff;
box-shadow: 0 2px 4px rgba(0,0,0,.2);
}
main {
margin-right: auto;
margin-left: auto;
max-width: var(--main-max-width);
}
section.grid-2-col {
display: grid;
/* 2 COLUMNS: FIXED PX WIDTH THEN RESIDUAL IS TAKEN UP */
grid-template-columns: var(--citation-col-width) 1fr;
grid-column-gap: 1rem;
margin-top: 2.5rem;
}
section.grid-2-col h2 {
grid-column: span 2;
}
section.grid-2-col p {
/* PARAS START IN GRID 2ND COLUMN */
grid-column-start: 2;
margin-top: 0;
margin-bottom: .7rem;
position: relative;
}
section.grid-2-col span.ref {
/* HAD TO POSITION ABSOLUTE TO HIDE OVERFLOWING REFERENCES /
position: absolute;
display: block;
max-width: var(--citation-col-width);
/ NEGATIVE VALUE (* -1), -CITATION COLUMN WIDTH - COL GAP /
left: calc((var(--citation-col-width) * -1) - 1rem);
/ WHEN WRAPPING SPANS OVERLAPPED */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: .8rem;
color: #666;
}
/* UP TO 4 REFERENCES PER PARA (ADD MORE IF REQUIRED) */
section.grid-2-col span.ref:nth-of-type(1) {
top: 0;
}
section.grid-2-col span.ref:nth-of-type(2) {
top: var(--span-reference-top);
}
section.grid-2-col span.ref:nth-of-type(3) {
top: calc(var(--span-reference-top) * 2);
}
section.grid-2-col span.ref:nth-of-type(4) {
top: calc(var(--span-reference-top) * 3);
}
h1, h2 {
font-weight: 400;
margin-top: 0;
margin-bottom: .8rem;
}
h1 {
font-size: 2.8rem;
color: #9d9d9d;
border-bottom: 1px solid #9d9d9d;
margin-bottom: 2.5rem;
}
h2 {
font-size: 1.5rem;
}
@media only screen and (max-width: 799px) {
article {
padding-right: .5rem;
padding-left: .5rem;
}
section.grid-2-col {
/* DON'T NEED GRID NOW */
display: block;
}
section.grid-2-col span.ref {
left: unset;
max-width: 90vw;
}
/* UP TO 4 REFERENCES PER PARA (ADD MORE IF REQUIRED) */
section.grid-2-col span.ref:nth-of-type(1) {
top: 100%;
}
section.grid-2-col span.ref:nth-of-type(2) {
top: calc(100% + var(--span-reference-top));
}
section.grid-2-col span.ref:nth-of-type(3) {
top: calc(100% + var(--span-reference-top) * 2);
}
section.grid-2-col span.ref:nth-of-type(4) {
top: calc(100% + var(--span-reference-top) * 3);
}
/* ALLOW DYNAMIC SPACE FOR ABSOLUTE REFERENCES */
section.grid-2-col p:has(span.ref:nth-of-type(1)) {
border-bottom: solid var(--span-reference-top) transparent;
}
section.grid-2-col p:has(span.ref:nth-of-type(2)) {
border-bottom: solid calc(var(--span-reference-top) * 2) transparent;
}
section.grid-2-col p:has(span.ref:nth-of-type(3)) {
border-bottom: solid calc(var(--span-reference-top) * 3) transparent;
}
section.grid-2-col p:has(span.ref:nth-of-type(4)) {
border-bottom: solid calc(var(--span-reference-top) * 4) transparent;
}
}
</style>
</head>
<body>
<main>
<article>
<h1>Document title</h1>
<section class="grid-2-col">
<h2>First section of the document</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras fringilla porta est nec rhoncus. Vestibulum ultricies molestie ante, vel fringilla turpis tempor at. Maecenas eu leo justo. Aliquam scelerisque metus in massa hendrerit 1, <span class="ref">1 Wikipedia, truncated long text length to reference</span>. Etiam [2] <span class="ref">[2] A fancy textbook</span> lacinia. Quisque [3] <span class="ref">[3] Another less fancy manuscript reference</span> ultricies lacinia dignissim. Suspendisse [4] <span class="ref">[4] Another far less fancy reference</span> et blandit metus tincidunt at. Quisque vel varius enim.</p>
<p>Aenean cursus vestibulum libero, eu vulputate nisi efficitur sit amet. Praesent quis metus ac leo eleifend tempus. Praesent ac mauris eleifend, luctus ligula vel, interdum lectus. Donec iaculis in est non iaculis. Nullam vulputate, lorem quis placerat condimentum, risus lectus feugiat neque, id auctor augue elit ut enim. Donec vel rutrum massa. Nunc laoreet nulla et eleifend facilisis. Morbi scelerisque velit sit amet libero viverra mattis. Vivamus non porta neque, et rhoncus mi. In lectus nisl, faucibus nec sem sed, ullamcorper commodo ante. Aliquam ac massa imperdiet, viverra lacus eget, convallis ex. Phasellus tempus lacinia enim id tincidunt.</p>
</section>
<section class="grid-2-col">
<h2>Second section of the document</h2>
<p>Aenean cursus vestibulum libero, eu vulputate nisi efficitur sit amet. Praesent quis metus ac leo eleifend tempus. Praesent ac mauris eleifend, luctus ligula vel, interdum lectus. Donec iaculis in est non iaculis. Nullam vulputate, lorem quis placerat condimentum, risus lectus feugiat neque, id auctor augue elit ut enim. Donec vel rutrum massa. Nunc laoreet nulla et eleifend facilisis. Morbi scelerisque velit sit amet libero viverra mattis. Vivamus non porta neque, et rhoncus mi. In lectus nisl, faucibus nec sem sed, ullamcorper ex. Phasellus tempus lacinia enim id tincidunt.Aenean cursus vestibulum libero, eu vulputate nisi efficitur sit amet. Praesent quis metus ac leo eleifend tempus. Praesent ac mauris eleifend, luctus ligula vel, interdum lectus. Donec iaculis in est non iaculis. Nullam vulputate, lorem quis placerat condimentum, risus lectus feugiat neque, id auctor augue elit ut enim. Donec vel rutrum massa. Nunc laoreet nulla et eleifend facilisis. Morbi scelerisque velit [3] <span class="ref">[3] ChatGPT. </span> sit amet libero viverra mattis. Vivamus non porta neque, et rhoncus mi. In lectus nisl, faucibus nec sem sed, ullamcorper commodo ante. Aliquam ac massa imperdiet, viverra [4] <span class="ref">[4] Stack Overflow. </span> lacus eget, convallis ex. Phasellus tempus lacinia enim id tincidunt.Aenean cursus vestibulum libero, eu vulputate nisi efficitur sit amet. Praesent quis metus ac leo eleifend tempus. Praesent ac mauris eleifend, luctus ligula vel, [5] <span class="ref">[5] Bing. </span> interdum lectus. Donec iaculis in est non iaculis. Nullam vulputate, lorem quis placerat condimentum, risus lectus feugiat neque, id auctor augue elit ut enim. Donec vel rutrum massa. Nunc laoreet nulla et eleifend facilisis. Morbi scelerisque velit sit amet libero viverra mattis. Vivamus non porta neque, et rhoncus mi. In lectus nisl, faucibus nec sem sed, ullamcorper commodo ante. Aliquam ac massa imperdiet, viverra lacus eget, convallis ex. Phasellus tempus lacinia enim id tincidunt.</p>
</section>
</article>
</main>
</body>
</html>
<!-- end snippet -->
答案3
得分: 0
我建议在桌面版本中将链接放在段落底部，在移动版中它们会出现在你需要的地方。同时，不要忘记考虑可访问性。类似这样的代码：
英文:
I suggest placing the links at the bottom of the paragraph on the desktop version, and on mobile they will be where you need them. Also, don't forget about accessibility. Something like this:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-width: 320px;
}
:root{
--gap: 20px;
--line-height: 1.33;
}
main {
margin: 0 auto;
padding: var(--gap);
max-width: 800px;
line-height: var(--line-height);
}
article,
section {
display: flex;
flex-direction: column;
row-gap: var(--gap);
}
h1 {
text-align: center;
}
h2 {
border-top: 1px solid gray;
padding: var(--gap) 0;
}
@media (min-width: 768px) {
p{
position: relative;
padding-left: 33.333%;
}
}
.refs {
display: flex;
flex-direction: column;
align-items: flex-start;
padding-top: calc(var(--gap) / 2);
margin-top: calc(var(--gap) / 2);
border-top: solid 1px;
color: #666;
font-size: 14px;
}
@media (min-width: 768px){
.refs{
position: absolute;
width: calc(33.333% - var(--gap));
left: 0;
bottom: 0;
max-height: 100%;
overflow-y: auto;
margin: 0;
border: 0;
padding: 0;
}
}
.ref {
display: flex;
flex: none;
max-width: 100%;
}
.ref a {
height: calc(var(--line-height) - 4px);
line-height: var(--line-height);
color: inherit;
margin: 2px;
}
.ref a:first-child {
flex: auto;
white-space: nowrap;
text-overflow: ellipsis;
min-width: 1px;
overflow: hidden;
}
.ref a:last-child {
flex: none;
}
:target {
background-color: yellow;
}
<!-- language: lang-html -->
<main>
<article>
<h1>Document Title</h1>
<section>
<h2>First section of the document</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras fringilla porta est nec rhoncus. Vestibulum ultricies molestie ante, vel fringilla turpis tempor at. Maecenas eu leo justo. Aliquam scelerisque metus in massa
hendrerit
<a id="content-ref-1" href="#ref-1" aria-label="link to hendrerit description">[1]</a>,
non condimentum augue pharetra. Etiam in lorem eu nibh
sagittis
<a id="content-ref-2" href="#ref-2" aria-label="link to sagittis description">[2]</a>
lacinia sit amet eu odio. Quisque ultricies lacinia dignissim. Suspendisse blandit urna justo, et blandit metus tincidunt at. Quisque vel varius enim.
<span class="refs">
<span class="ref" id="ref-1">
<a href="#" title="[1] Wikipedia.">[1] Wikipedia.</a>
<a href="#content-ref-1" aria-label="back to content" title="back to content">&#8617;</a>
</span>
<span class="ref" id="ref-2">
<a href="#" title="[2] A fancy textbook A fancy textbook fancy textbook A fancy textbook A fancy textbook">[2] A fancy textbook A fancy textbook fancy textbook A fancy textbook A fancy textbook</a>
<a href="#content-ref-2" aria-label="back to content" title="back to content">&#8617;</a>
</span>
</span>
</p>
<p>
Aenean cursus vestibulum libero, eu vulputate nisi efficitur sit amet. Praesent quis metus ac leo eleifend tempus. Praesent ac mauris eleifend, luctus ligula vel, interdum lectus. Donec iaculis in est non iaculis. Nullam vulputate, lorem quis placerat condimentum, risus lectus feugiat neque, id auctor augue elit ut enim. Donec vel rutrum massa. Nunc laoreet nulla et eleifend facilisis. Morbi scelerisque velit sit amet libero viverra mattis. Vivamus non porta neque, et rhoncus mi. In lectus nisl, faucibus nec sem sed, ullamcorper commodo ante. Aliquam ac massa imperdiet, viverra lacus eget, convallis ex. Phasellus tempus lacinia enim id tincidunt.
</p>
</section>
<section>
<h2>A second section</h2>
</section>
</article>
</main>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论