css 一种将内联元素浮动在容器下方的方法

yv5phkfx  于 2023-06-25  发布在  其他
关注(0)|答案(3)|浏览(91)

我正在构建一个模板来编写一些技术文档。我想用尽可能少的JavaScript来做这件事。我包括一个minimal example
当屏幕较宽时，它会将span标记中的引用浮动到左边距。当屏幕变窄时（例如，在移动的设备上），没有足够的数字真实的显示左边距，我想立即显示段落后面的引用（或者，也许，在结尾）。我见过其他人建议这样做，以一些绝对的位置，但我不认为这在我的情况下起作用，因为在一个段落中可能有多个引用。我看到的另一种选择是将一个段落的所有页边注解放在一个单独的块中，并浮动到页边。出于各种原因，我希望能够将span标记尽可能靠近它所引用的文本。在一个完美的世界里，我想让html尽可能地保持语义，所以我不想把每个段落都 Package 在另一个div标签或table标签中。
我已经能够做的一个近似的解决方案（如Codepen示例所示）是将段落显示为一个flexbox，并更改引用范围的顺序，以便它们显示在主文本之后。这几乎是可行的，除了通过将段落更改为显示为flexbox，跨度之间的每一个连续文本行都被呈现为一个块，这会产生尴尬的换行符。我已经尝试了一些CSS技巧，试图让剩余的文本像没有span标签时一样 Package ，但我开始相信这是不支持的（也许是一些聪明的CSS选择器display: content）

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;}
  
  
}
<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>
css

3条答案

按热度按时间
tyg4sfes

tyg4sfes1#

因为你不想要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>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>
赞(0）分享  回复(0）举报  2023-06-25
b91juud3

b91juud32#

我建议在桌面版本中将链接放在段落的底部，在移动的版本中，它们将位于您需要的位置。此外，不要忘记可访问性。就像这样：

* {
  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;
}
<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>
赞(0）分享  回复(0）举报  2023-06-25
50pmv0ei

50pmv0ei3#

我有另一个裂缝，并能够让它工作与一个单一的版本（与一些警告）。完全不需要复制引用或调整基础HTML。
注意：我使用的是Firefox目前不支持的:has选择器。How do you enable :has() selector on Firefox

跨度需要用position: absolute将其从默认的内联点中“拉”出来，以便使剩余段落文本上移到引用跨度之前所在的位置。

<!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>
赞(0）分享  回复(0）举报  2023-06-25
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com