在 HTML 中做旁注的可靠方法是什么？答案

【问题标题】：What is a reliable way of doing sidenotes in HTML?在 HTML 中做旁注的可靠方法是什么？
【发布时间】：2010-10-17 13:22:56
【问题描述】：

我在网上发布了很多文字，甚至写了一个system 来为我格式化HTML。现在，我有一个问题：我想像书籍一样在 HTML 页面中制作旁注。只是为了解释一下，旁注是紧挨着正文的页边空白处的那些注释。

有没有人知道一种好的、可靠的方法——最好是使用纯 CSS 而不是 JavaScript。谢谢！

【问题讨论】：

标签： html css

【解决方案1】：

好的，让这个更加对浏览器更友好（FF3、IE7/8、Chrome）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html>
<head>
  <title>Layout</title>
  <style type="text/css">
    html, body, #wrapper { height: 100%; margin: 0; padding: 0; }
    body { background-color: #666; width: 100%; text-align: center; font-family: Arial, sans-serif; }
    #wrapper { width: 960px; margin: 0 auto; background: white; padding: 20px 0; }
    #page { width: 660px; margin: 0 auto; text-align: justify; }
    div.sidenote-left { float: left; margin-left: -150px; }
    div.sidenote-right { float: right; margin-right: -150px; }
    div.sidenote-left, div.sidenote-right { width: 150px; text-align: left; }
    div.sidenote-left div, div.sidenote-right div { margin: 0 10px; border: 1px solid #666; padding: 4px; }
  </style>
</head>
<body>
<div id="wrapper">
<div id="page">
<p>In the 90s we saw the rise of GUIs (yes I know Macs were around in the 80s but GUIs became the standard for everyone once Windows took hold). This transition had many casualties like Lotus 1-2-3 (which was basically killed by Excel on Windows) and Wordperfect (MS Word killed it). Now you can argue that MS had the inside track since they also produced Windows and you'd be right but beyond that I think MS adjusted to the change quicker than anyone else.</p>
<p>Borland was still an agile little company back then. It adjusted and took its highly successful Turbo Pascal and created Delphi.</p>
<div class="sidenote-left"><div>See Chapter 7 for further explanation</div></div>
<p>Now truly compiled languages ruled the roost in the 1990s with the exception of one little upstart: Java, which was something basically new. It was sorta compiled, sorta interpreted (being compiled into machine-independent bytecode that ran on a virtual machine). I personally think that the rise of both Java and Netscape scared the absolute bejesus out of Microsoft in the late 90s.</p>
<div class="sidenote-right"><div>See Chapter 9 for further explanation</div></div>
<p>Borland adjusted reasonably well producing what was really the first really successful Java IDE in JBuilder.</p>
<p>They were fending off a resurgent Microsoft who also produced successive versions of Visual Studio that (imho) were years ahead of their time in the late 90s. I can remember coding Visual C++ with MTS (microsoft Transaction Server) DCOM objects over 10 years ago and that was a precursor to the modern application server platform we have today. Remote debugging and the like were things that were (or at least seemed) light years ahead on Visual Studio.</p>
</div>
</div>
</body>
</html>

注意：针对文本选择问题，我尝试了绝对定位，你可以通过改变这个CSS来做到这一点：

div.sidenote-left { position: absolute; margin-left: -150px; }
div.sidenote-right { position: absolute; margin-left: 660px; }

但它仍然选择文本。

我看到的唯一方法是将您的页面更改为 2/3 列格式，其中旁注位于其他列中。唯一的问题是您失去了移动与文本相关的注释的能力。或者至少我想不出办法。

【讨论】：

唯一的麻烦是，当你在中间选择旁注的段落时，你也会得到旁注。但是，除了使用 javascript，我不知道如何解决这个问题。（在 dom-ready 中，您可以将其拉出到一个绝对定位的对象中。）
太棒了！如何使其适应灵活的网页宽度？

【解决方案2】：

如果您很懒惰，请使用 CSS 框架！您可以使用的最简单的框架之一是960.gs。这将帮助您在几分钟内准确完成您想做的事情。

【讨论】：