模仿HTML中的聖經詩歌佈局

-2

我試圖模仿維基的佈局，在每一行之前顯示每行中出現的第一節經文。這甚至可以用基本的HTML？模仿HTML中的聖經詩歌佈局

<div style="margin-left:2em"><span style="color:#2E8B57; float:left; text-align:right; margin-left:-3em; width:2.5em;" id="I.">I.</span> IN the beginning God made the heaven and the earth. <span style="color:#2E8B57; float:left; text-align:right; margin-left:-3em; width:2.5em;" id="I.">2</span> And the earth was invisible and unfurnished and there was darkness over this abyss; and a breath of God was brought on above the water. <span style="color:#2E8B57; float:left; text-align:right; margin-left:-3em; width:2.5em;" id="I.">3</span> And God said, "Let there be Light;" and there was light. And God saw the light that it was good. <span style="color:#2E8B57; float:left; text-align:right; margin-left:-3em; width:2.5em;" id="I.">4</span>And God made a separation between the light and the darkness. <span style="color:#2E8B57; float:left; text-align:right; margin-left:-3em; width:2.5em;" id="I.">5</span>And God called the light day; and the darkness he called night. And there was an evening and there was a morning. The first day.</div>

我希望有人能幫助感謝

來源

2016-03-06 jpez

這是不可能的基本的HTML，但可以用CSS/JavaScript實現。請提供一個起點（CodePen或JSFiddle），另請參閱http://stackoverflow.com/help/mcve – Roy

那麼，該頁面如何做呢？你可以看到他們的HTML。 – David

這是我想出的。 https://jsfiddle.net/jpez/ukfpj2o8/它可以正常工作，除非經文編號在浮動跨度重疊的同一行上。 – jpez

我想出了一些東西，爲目的，我需要它的正常工作。通過添加白色背景，我擺脫了浮動的詩節數字的重疊，並且通過使用z-index，我可以在行顯示中製作第一節，而不是默認顯示的最後一節。下面是每個節之前使用的跨度，例如

<span style="color:#2E8B57; background-color:#FFFFFF; position:relative; z-index:99; font-size:small; float:left; text-align:right; margin-left:-3em; width:2.5em;">1</span>

節2將具有98的z索引值1節，第3節，97等

來源

2016-03-08 05:44:57 jpez

模仿HTML中的聖經詩歌佈局

回答

相關問題