【发布时间】：2021-01-30 21:58:01
【问题描述】：
我有这个从乳胶代码生成的 xml 文件生成的 html 代码，我无法更改 html 输出。我正在研究古代瑜伽文本的印度学版本。我不只是想有一个很好的乳胶文档来打印我的版本。我也想同时拥有一个网络版。因此，我的 lualatex 代码被处理，将 xslt2 处理器处理的 xml 文件输出到 html 文件。这是html：
@font-face {
font-family: LinuxLibertineDisplay0Regular, times, serif;
src: url(fonts/LinLibertine_DR.woff);
}
/* {box-sizing: border-box;}*/
/*body {background-color: #FFFFFF; font-family: 'LinuxLibertineDisplayORegular'; font-weight: normal; font-style: normal; font-size: 18px; padding: 20px 100px 20px; width: 1600px;}*/
body {
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-flow: row dense;
grid-gap: 0.5rem;
}
h1 {
grid-column-start: 1;
grid-column-end: none;
}
.edition,
.translation {
display: inherit;
grid-template-rows: 1fr 1fr;
grid-auto-rows: 1fr;
row-gap: 10px
}
.edition {
grid-column-start: 1;
}
.translation {
grid-column-start: 2;
}
.edition > div[type="ed"] {
background-color: #def;
padding: 0.5rem;
}
.translation > div[type="trans"] {
background-color: #abc;
padding: 0.5rem;
}
ul {list-style: circle;}
ul.dash {list-style: none; margin-left: .5em; padding-left: .5em;}
ul.dash > li:before {display: inline-block; content: "–"; width: 1em; margin-left: 0em;}
a:link {color: black; text-decoration: underline;}
a:visited {color: black; text-decoration: underline;}
a:hover {color: black; text-decoration: none;}
a:active {color: black; text-decoration: underline;}
p {padding-left: .5em; padding-right: .5em;}
h4 {margin-bottom: 0px;}
mark {background-color: #FFFFCC;}
q:before {content: "»";}
q:after {content: "«";}
.noindent {padding: 0px;}
.comm {padding-left: 1em; padding-right: 1em;}
.app {width: 80%; text-align: left; font-size: 10px; padding-left: 1em;}
.lem {display:inline-block;}
.ref {font-size: 14px; padding: inherit;}
.lb {font-weight: bold; font-size: 14px;}
.lb:before {content: "["}
.lb:after {content: "]"}
.pb {font-weight: bold; font-size: 14px;}
.pb:before {content: " ["}
.pb:after {content: "] "}
.note {font-weight: bold; font-size: 14px;}
.note:before {content: " ["}
.note:after {content: "] "}
.subhead {font-weight: bold; font-size: 14px;}
.appnote {font-size: 14px;}
.appnote:before {content: " ["}
.appnote:after {content: "] "}
.hi {font-style: italic}
.sic:before {content: "†"}
.sic:after {content: "†"}
.corr {color: #008000;}
.supplied {color: #1E90FF;}
.surplus {color: #ff3333;}
.unclear {color: #D2B48C;}
/* custom renditions */
.b, .bf, .textbf, .bold {font-weight: bold}
.i, .it, .textit, .italic {font-style: italic}
.u, .underline {text-decoration: underline}
.blue {color: #0000e6;}
.red {color: #b30000;}
.row:after {content: ""; display: table; clear: both;}
.column {float: left; width: 50%; padding-left: .5em; padding-right: .5em;}
.analysis {font-size: 14px; color: #0066ff; padding-left: .5em; padding-right: .5em; padding-top: .1em;}
.analysis:before {content: "["}
.analysis:after {content: "]"}
div.wapp:hover span.lem {background-color: #FFFFCC;}
@media screen and (max-width: 800px) {
body {font-size: 16px;}
.column {width: 100%;}
.analysis {width: 100%;}
}
@media screen and (max-width: 1200px) {
body {padding: 10px;}
.app {width: 90%;}
}
@media only screen and (max-width: 1600px) {
body {width: auto; padding: 20px;}
}
#toc_container {background: #f9f9f9 none repeat scroll 0 0; border: 1px solid #aaa; display: table; font-size: 95%; margin-bottom: 1em; padding: 1em; width: auto;}
.toc_title {font-weight: 700; text-align: center;}
#toc_container li, #toc_container ul, #toc_container ul li{list-style: outside none none !important; padding-left: .5em;}
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
</head>
<body>
<h1></h1>
<div xmlns="http://www.tei-c.org/ns/1.0" xml:id="div-edition_1" class="edition">
<div type="ed">
<h3 xmlns="http://www.w3.org/1999/xhtml">Maṅgala statement</h3>
<centerline>
<textrm><small>[Introduction]</small></textrm>
</centerline>
<div xmlns="http://www.w3.org/1999/xhtml" class="wapp">
<p> <mark>śrī gaṇeśāya namaḥ</mark> // <mark>atha rājayogaprakāro likhyate</mark> // </p>
<div class="app"><span class="lem">śrī gaṇeśāya namaḥ (<a href="#E" title="E Printed Edition">E</a> <a href="#L" title="L LALCHAND 5876">L</a> <a href="#N1" title="N1 NGMPP 38/31">N1</a> <a href="#D1" title="D1 IGNCA 30019">D1</a> <a href="#U1" title="U1 SORI 1574">U1</a> <a href="#U2" title="U2 SORI 6082">U2</a>) ]</span> śrī ṇe ya maḥ (<a href="#P" title="P Pune BORI 664">P</a>), śrī gurave namaḥ (<a href="#N1" title="N1 NGMPP 38/31">N1</a>), śrī sarasvatyai namaḥ śrī nirañjanāya namaḥ (<a href="#D1" title="D1 IGNCA 30019">D1</a>), oṃ śrī niraṃjanāya (<a href="#U1" title="U1 SORI 1574">U1</a>)</div>
<div class="app"><span class="lem">atha rājayogaprakāro likhyate (<a href="#N1" title="N1 NGMPP 38/31">N1</a> <a href="#D1" title="D1 IGNCA 30019">D1</a>) ]</span> atha rājayogaprakāra likhyate (<a href="#U1" title="U1 SORI 1574">U1</a>), rājayogāntargataḥ / binduyogaḥ (<a href="#E" title="E Printed Edition">E</a>), atha tattvabiṃduyogaprāraṃbhaḥ (<a href="#L" title="L LALCHAND 5876">L</a>), atha rājayoga liṣyate (<a href="#P" title="P Pune BORI 664">P</a>), atha rājayoga likhyate (<a href="#U2" title="U2 SORI 6082">U2</a>)</div>
</div>
</div>
<div type="ed">
<h3 xmlns="http://www.w3.org/1999/xhtml">Intro</h3>
<div xmlns="http://www.w3.org/1999/xhtml" class="wapp">
<p> rājayogasyedaṃ phalaṃ / yena rājayogenānekarājyabhogasamaya eva / anekapārthivavinoda<mark>prekṣaṇasamaya</mark> eva / bahutarakālaṃ śarīrasthitirbhavati / sa <mark>eva</mark> rājayogaḥ / tasyaite bhedāḥ / </p>
<div class="app"><span class="lem">prekṣaṇasamaya (<a href="#P" title="P Pune BORI 664">P</a> <a href="#N1" title="N1 NGMPP 38/31">N1</a> <a href="#D1" title="D1 IGNCA 30019">D1</a> <a href="#U1" title="U1 SORI 1574">U1</a>) ]</span> prekṣyaṇasamaya (<a href="#U2" title="U2 SORI 6082">U2</a>)</div>
<div class="app"><span class="lem">eva (<a href="#P" title="P Pune BORI 664">P</a> <a href="#N1" title="N1 NGMPP 38/31">N1</a> <a href="#D1" title="D1 IGNCA 30019">D1</a> <a href="#U2" title="U2 SORI 6082">U2</a>) ]</span> evaṃ (<a href="#U2" title="U2 SORI 6082">U2</a>)</div>
</div>
</div>
<div type="ed">
<h3 xmlns="http://www.w3.org/1999/xhtml">The 15 Yogas</h3>
<div xmlns="http://www.w3.org/1999/xhtml" class="row">
<div class="column">
<div class="wapp">
<p>kriyāyogaḥ / jñānayogaḥ / <mark>cāryayogaḥ</mark> / haṭhayogaḥ / karmayogaḥ / <mark>layayogaḥ</mark> / dhyānayogaḥ / mantrayogaḥ / <mark>lakṣyayogaḥ</mark> / vāsanāyogaḥ / śivayogaḥ / brahmayogaḥ / advaitayogaḥ / <mark>siddhayogaḥ / rājayogaḥ</mark> / <mark>ete pañcadaśayogāḥ</mark> //</p>
<div class="app"><span class="lem">cāryayogaḥ (<a href="#P" title="P Pune BORI 664">P</a> <a href="#N1" title="N1 NGMPP 38/31">N1</a> <a href="#D1" title="D1 IGNCA 30019">D1</a> <a href="#U2" title="U2 SORI 6082">U2</a>) ]</span> tvaryāyogaḥ (<a href="#U1" title="U1 SORI 1574">U1</a>)</div>
<div class="app"><span class="lem">layayogaḥ (<a href="#P" title="P Pune BORI 664">P</a> <a href="#N1" title="N1 NGMPP 38/31">N1</a> <a href="#D1" title="D1 IGNCA 30019">D1</a> <a href="#U1" title="U1 SORI 1574">U1</a>) ]</span> nayayogaḥ (<a href="#U2" title="U2 SORI 6082">U2</a>)</div>
<div class="app"><span class="lem">lakṣyayogaḥ (<a href="#P" title="P Pune BORI 664">P</a> <a href="#N1" title="N1 NGMPP 38/31">N1</a> <a href="#D1" title="D1 IGNCA 30019">D1</a> <a href="#U2" title="U2 SORI 6082">U2</a>) ]</span> lakṣayogaḥ (<a href="#U1" title="U1 SORI 1574">U1</a>)</div>
<div class="app"><span class="lem">siddhayogaḥ / rājayogaḥ (<a href="#P" title="P Pune BORI 664">P</a> <a href="#U2" title="U2 SORI 6082">U2</a>) ]</span> rājayogaḥ / siddhayogaḥ (<a href="#N1" title="N1 NGMPP 38/31">N1</a> <a href="#D1" title="D1 IGNCA 30019">D1</a> <a href="#U1" title="U1 SORI 1574">U1</a>)</div>
<div class="app"><span class="lem">ete pañcadaśayogāḥ (<a href="#P" title="P Pune BORI 664">P</a> <a href="#N1" title="N1 NGMPP 38/31">N1</a> <a href="#D1" title="D1 IGNCA 30019">D1</a> <a href="#U1" title="U1 SORI 1574">U1</a>) ]</span> evaṃ paṃcadaśāyogā bhavaṃti (<a href="#U2" title="U2 SORI 6082">U2</a>)</div>
</div>
</div>
<div class="column">
<p class="analysis">The initial codification of 15 yogas appears in N1,P,D1,U1 and U2. It is ommitted
in E and L. B can't be determined due to missing folios. P is the only witness which
numbers the yogas with devanāgarī-digits. The other witnesses separate the list with
single or double daṇḍas.</p>
</div>
</div>
</div>
<div type="ed">
<h3 xmlns="http://www.w3.org/1999/xhtml">Kriyāyoga</h3>
<centerline>
<textrm><small>[Description of <span xmlns="http://www.w3.org/1999/xhtml" class="italic">kriyāyoga</span>]</small></textrm>
</centerline>
<div xmlns="http://www.w3.org/1999/xhtml" class="wapp">
<p><mark>idānīṃ</mark> <mark>kriyāyogasya</mark> lakṣaṇaṃ <mark>kathyate</mark>/</p>
<div class="app"><span class="lem">idānīṃ (<a href="#P" title="P Pune BORI 664">P</a> <a href="#N1" title="N1 NGMPP 38/31">N1</a> <a href="#D1" title="D1 IGNCA 30019">D1</a> <a href="#U1" title="U1 SORI 1574">U1</a>) ]</span> atha (<a href="#U2" title="U2 SORI 6082">U2</a>)</div>
<div class="app"><span class="lem">kriyāyogasya (<a href="#P" title="P Pune BORI 664">P</a> <a href="#N1" title="N1 NGMPP 38/31">N1</a> <a href="#D1" title="D1 IGNCA 30019">D1</a> <a href="#U1" title="U1 SORI 1574">U1</a>) ]</span> kriyāyogas (<a href="#U2" title="U2 SORI 6082">U2</a>)</div>
<div class="app"><span class="lem">kathyate (<a href="#P" title="P Pune BORI 664">P</a> <a href="#N1" title="N1 NGMPP 38/31">N1</a> <a href="#U1" title="U1 SORI 1574">U1</a>) ]</span> kathayate (<a href="#D1" title="D1 IGNCA 30019">D1</a>), \om (<a href="#U2" title="U2 SORI 6082">U2</a>)</div>
</div>
</div>
</div>
<div xmlns="http://www.tei-c.org/ns/1.0" xml:id="div-translation_1" class="translation">
<div type="trans">
<h3 xmlns="http://www.w3.org/1999/xhtml">Maṅgala statement</h3>
<centerline>
<textrm><small>[Introduction]</small></textrm>
</centerline>
<p xmlns="http://www.w3.org/1999/xhtml">Homage to Śrī Gaṇeśa. Now the methods of rājayoga are laid down. </p>
</div>
<div type="trans">
<h3 xmlns="http://www.w3.org/1999/xhtml">Intro</h3>
<p xmlns="http://www.w3.org/1999/xhtml">This is the result of <span class="italic">rājayoga</span><span class="note">This statement seems unconnected to the definition of rājayoga that follows.</span>: <span class="italic">Rājayoga</span> is that by which longterm durability of the body arises even amongst manifold royal
pleasures even amongst the manifold royal entertainments and spectacle. This truly
is <span class="italic">rājayoga</span>. Of this [<span class="italic">rājayoga</span>] these are the varieties: </p>
</div>
<div type="trans">
<h3 xmlns="http://www.w3.org/1999/xhtml">The 15 Yogas</h3>
<p xmlns="http://www.w3.org/1999/xhtml">1. Yoga of [mental] action (<span class="italic">kriyāyoga</span>), 2. Yoga of knowledge (<span class="italic">jñānayoga</span>), 3. Yoga of wandering (<span class="italic">caryāyoga</span>), 4. Yoga of force (<span class="italic">haṭhayoga</span>), 5. Yoga of deeds (<span class="italic">karmayoga</span>), 6. Yoga of absorption (<span class="italic">layayoga</span>), 7. Yoga of meditation (<span class="italic">dhyānayoga</span>), 8. Yoga of mantras (<span class="italic">mantrayoga</span>), 9. Yoga of fixation objects (<span class="italic">lakṣyayoga</span>), 10. Yoga of mental residues (<span class="italic">vāsanāyoga</span>), 11. Yoga of Śiva (<span class="italic">śivayoga</span>), 12. Yoga of Brahman (<span class="italic">brahmayoga</span>), 13. Yoga of non-duality (<span class="italic">advaitayoga</span>), 14. Yoga of completion (<span class="italic">siddhayoga</span>) 15. Yoga of kings (<span class="italic">rājayoga</span>). These are the fifteen <span class="italic">yoga</span>s.<span class="note">At the current stage of research it is not clear if this list is a later addition
by another scribe or, if indeed it originally stems from Rāmacandra. The list suggests
a text following the order of yogas according to this list. However, the order and
even the designation of some of the yogas given in the list is just followed very
loosely in the text.</span></p>
</div>
<div type="trans">
<h3 xmlns="http://www.w3.org/1999/xhtml">Kriyāyoga</h3>
<centerline>
<textrm><small>[Description of <span xmlns="http://www.w3.org/1999/xhtml" class="italic">kriyāyoga</span>]</small></textrm>
</centerline>
<p xmlns="http://www.w3.org/1999/xhtml">Now the characteristic of the Yoga of [mental] action (<span class="italic">kriyāyoga</span>) described.</p>
</div>
</div>
</body>
</html>
我想使用 css 在两列中显示 html，其中包含无限行作为我的版本和翻译。第一行应该显示翻译，下一行应该显示相应的翻译。
这应该是连续对齐的。
我无法更改 html 太多。我必须通过应用 css 来做到这一点。所以我认为通过选择具有 n=1 和 n=2 的 div 标记来访问是个好主意。
版本第 1 部分由 type="ed" 标记，应进入第一列第一行。第 1 部分的翻译它由 type="trans" 标记，应该进入第二列第一行。 版本第 2 部分由 type="ed" 标记，应进入第一列第二行。 第 2 部分的翻译由 type="trans" 标记，应进入第二列第二行。
还有可能如此等等。
但不知何故，我无法弄清楚。我在这里坐了 9 个小时，但它不起作用。
你能帮帮我吗？
谢谢你和最良好的祝愿， 恩乔特尔
........
【问题讨论】：
-
你好。请告诉我，
<h1></h1>标签应该在块之上，还是在块之下（之后）？ -
Hello @s.kuznetsov 应该在方块上方。