我想在网上放一篇带有段落编号和旁注的文本。我用哈克贝利-芬恩作为测试:看http://jsfiddle.net/29Mdt/.
我想把段落编号放在左边的空白处,把旁注放在右边的空白处。使用HTML中的表非常容易做到这一点,但我正在尝试使用CSS,而且我是CSS的初学者。前面关于段落编号的问题可以在这里找到,但我觉得这些回答根本没有帮助。
提前感谢您的帮助。
一种方法:
.chapter {
counter-reset: paragraph;
padding-left: 20px;
}
.page p {
width: 400px;
}
.page p:before {
position: absolute;
margin-left: -20px;
color: #CCC;
content: counter(paragraph);
counter-increment: paragraph;
}
.sidenote {
position: absolute;
margin-left: 420px;
font-size: 14px;
color: #E22;
width: 100px;
}
HTML:
<body class="chapter">
<div class="page">
<h1>Tom Sawyer</h1>
<p>You don't know about me...</p>
<!-- sidenote to the paragraph following the aside tag -->
<aside class="sidenote">The widow she cried over me...</aside>
<p>Now the way that the...</p>
</div>
</body>