我的网页是对另一个文档的逐页讨论。我想遵循原始文档的结构(带有标题、子标题和段落),但页码(或页面范围)也出现在 120 像素的边距中,就在该页面第一段的左侧) 我正在讨论。
到目前为止,我大致有我想要的。主要讨论在 DIV 标签内,带有“描述”。页码边缘保存在具有“页面”类的 DIV 标记内。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=windows-1251">
<TITLE>Blurble Blurble Blurble Blurble</TITLE>
<STYLE>
DIV.page { border-style: solid; border-width:medium; float:left; position:relative; left:-100px; width:70px; padding:2px; }
DIV.description { position:relative; left:100px; }
</STYLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#FF0000" VLINK="#800000" ALINK="#FF00FF">
<H1>Blurble Blurble Blurble Blurble Blurble</H1>
<DIV CLASS="description">
<H2>Blurble Blurble</H2>
<P>
Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble .
</P>
<P>
Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble .
</P>
<H2>Blurble Blurble</H2>
<DIV CLASS="page">Blurble 1</DIV>
<P>
Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble.
</P>
<P>
Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble .
</P>
<H2>Blurble Blurble</H2>
<DIV CLASS="page">Blurble 2</DIV>
<P>
Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble.
</P>
<P>
Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble .
</P>
</DIV>
</BODY>
</HTML>
这里的问题是,无论页面 DIV 出现在哪里,该 DIV 元素和 P 元素的一部分之间都有一个间隙——一大块空白。似乎浏览器认为页面 DIV 元素应该位于该空间中,因此它将文本环绕在它认为 DIV 元素应该位于的位置。
除此之外,浏览器总是应该水平滚动条来滚动它认为应该添加到窗口的额外 100 像素的额外空间。