什么是在HTML中执行sidenotes的可靠方法？ [英] What is a reliable way of doing sidenotes in HTML?
问题描述
我在线发布了大量文字，甚至撰写了系统来格式化HTML我。现在，我有一个问题：我想在HTML页面，像书一样sidenotes。
I publish a lot of text online, and even wrote a system to format HTML for me. Now, I have a problem: I want to make sidenotes in HTML pages just like books have. Just to explain, sidenotes are those notes in the margins right next to the main body text.
有没有人知道一个好的，可靠的方法来做到这一点 - 最好是纯CSS而不是JavaScript。非常感谢！
Does anyone know of a good, reliable way to do them -- preferably with plain CSS rather than JavaScript. Thanks!
推荐答案
确定，这个很多更适合浏览器（FF3，IE7 / ）：
Ok, made this much more browser friendly (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：
Note: in response to the text selection issue, I tried it with absolute positioning, which you can do by changing this CSS:
div.sidenote-left { position: absolute; margin-left: -150px; }
div.sidenote-right { position: absolute; margin-left: 660px; }
但仍然选择文本。
我看到的唯一方法是将页面更改为2/3列格式，其中旁注在其他列。唯一的问题是，你失去了相对于文本移动音符的能力。或者至少我不能想出一个办法。
The only way I see around this is to change your page into a 2/3 column format where the side notes are in other columns. The only problem with this is that you lose the ability to move the notes in relation to the text. Or at least I can't think of a way around that.
这篇关于什么是在HTML中执行sidenotes的可靠方法？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
