带段落编号和注释的CSS样式段落 [英] CSS-styled paragraphs with paragraph numbering and sidenotes
问题描述
我想用段落编号和附注在网络上放置一段文字。我使用Huckleberry Finn作为测试：请参阅 http://jsfiddle.net/29Mdt/ 。
我希望在左边的边距中有段落编号，而右边的边距中有旁注。这非常容易用HTML中的表格完成，但我试图用CSS来完成，而我是CSS的初学者。有关段落编号的较早问题可以参见这里，但我没有找到任何有用的答复。
感谢您提供任何帮助。
.chapter {
反复：段落;
padding-left：20px;
}
.page p {
width：400px;
}
.page p：before {
position：absolute;
margin-left：-20px;
颜色：#CCC;
content：counter（paragraph）;
counter-increment：paragraph;
}
.sidenote {
position：absolute;
margin-left：420px;
font-size：14px;
颜色：＃E22;
width：100px;
}
HTML：
< body class =chapter>
< div class =page>
< h1> Tom Sawyer< / h1>
< p>您不了解我...< / p>
<！ - 旁边标签后段落的旁注 - >
< aside class =sidenote>她对我哭泣的寡妇......< / aside>
< p>现在，...< / p>
< / div>
< / body>
I'm wanting to put a text on the web with paragraph numbers and sidenotes. I'm using Huckleberry Finn as a test: see http://jsfiddle.net/29Mdt/.
I'd like to have the paragraph numbers in the margin on the left, and the sidenotes in the margin on the right. This is extremely easily done with tables in HTML, but I'm trying to do it with CSS, and I'm a beginner to CSS. An earlier question about paragraph numbers can be found here, but I did not find the responses at all helpful.
Thanks in advance for any help.
One approach:
.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>
这篇关于带段落编号和注释的CSS样式段落的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
