色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

一種將內聯元素浮動到其容器下方的方法

CSS
錢淋西2年前8瀏覽0評論

我正在構建一個模板，用于編寫一些技術文檔。我喜歡用盡可能少的Javascript來做這件事。我正在包括一個最小的例子

當屏幕較寬時，它將span標記中的引用浮動到左邊距。當屏幕變窄時(例如，在移動設備上)，沒有足夠的數字空間來顯示左邊距，我想在段落之后立即顯示參考文獻(或者，可能在& ltsection & gt).我見過其他人建議用一些絕對定位來做這件事，但是我不認為這對我有用，因為在一個段落中可能有多個引用。我見過的另一個選項是將一個段落的所有旁注放在一個單獨的& lt旁白& gt浮動到邊緣的塊。出于各種原因，我希望能夠將span標簽放在盡可能靠近它所引用的文本的地方。在一個完美的世界中，我希望html盡可能保持語義，所以我不想將每個段落包裝在另一個div標簽或table標簽中。

我能夠做到的一個接近的解決方案(如Codepen示例所示)是將段落顯示為flexbox，并更改引用范圍的順序，以便它們顯示在主文本之后。這幾乎是可行的，除了通過將段落更改為flexbox顯示，跨度之間的每一個連續文本行都被呈現為一個塊，這造成了笨拙的換行符。我嘗試了許多CSS技巧，試圖讓剩余的文本像沒有sp an標記時那樣正常換行，但我開始相信這是不受支持的(也許用了一些聰明的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>

因為你不想要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>