将 "Three line" 文本与 html 中的缩进对齐

Question

我需要创建每行实际上由三行组成的文本：第一行是拉丁文本，第二行是数字，第三行是德文文本。随附的代码段主要是我想要的。

但是，文本是按节组织的。在我的示例中，这些将是第 1 部分和第 2 部分，它们由橙色的大数字引入。现在，我希望橙色数字能够突出显示，因为文本的意图同样正确。文本应如下所示

1  foo  bar  baz
   x    y    z
   Hans Kurt Paul

   xyz  bla  etc
   a    b    c
   Stak Bort Nehm

2  .... ....

html 和 css 是否有可能（但如果没有 JavaScript 可能）？

.container {
  width: 30em;
}
.box {
  float: left; 
  padding: 0.25em;
  height: 5em;
  border-bottom: 1px black solid;
}
.l1, .l2, .l3 {
  display: block;
}
.l2 {
  color: #bbf; 
  font-size: 0.9em
}
.item {
  font-size: 2em;
  color: #f70;
}
.break {
  clear:both;
}

<div class='container'>
     <span class='box'><span class='item'>1</span></span>
     <span class='box'><span class='l1'>Lorem</span><span class='l2'>1</span><span class='l3'>Dies</span></span>
     <span class='box'><span class='l1'>ipsum</span><span class='l2'>2</span><span class='l3'>ist</span></span>
     <span class='box'><span class='l1'>sapientem</span><span class='l2'>3</span><span class='l3'>ein</span></span>
     <span class='box'><span class='l1'>ne</span><span class='l2'>4</span><span class='l3'>Beispiel</span></span>
     <span class='box'><span class='l1'>neque</span><span class='l2'>5</span><span class='l3'>für</span></span>
     <span class='box'><span class='l1'>dolor</span><span class='l2'>6</span><span class='l3'>einen</span></span>
     <span class='box'><span class='l1'>erat,</span><span class='l2'>7</span><span class='l3'>Blindtext,</span></span>
     <span class='box'><span class='l1'>eros</span><span class='l2'>8</span><span class='l3'>der</span></span>
     <span class='box'><span class='l1'>solet</span><span class='l2'>9</span><span class='l3'>auf</span></span>
     <span class='box'><span class='l1'>invidunt</span><span class='l2'>10</span><span class='l3'>deutsch</span></span>
     <span class='box'><span class='l1'>duo</span><span class='l2'>11</span><span class='l3'>geschrieben</span></span>
     <span class='box'><span class='l1'>Quisque</span><span class='l2'>12</span><span class='l3'>ist.</span></span>
     <span class='box'><span class='l1'>aliquid</span><span class='l2'>13</span><span class='l3'>Es</span></span>
     <span class='box'><span class='l1'>leo.</span><span class='l2'>14</span><span class='l3'>gibt</span></span>
     <span class='box'><span class='l1'>Pretium</span><span class='l2'>15</span><span class='l3'>noch</span></span>
     <span class='box'><span class='l1'>patrioque</span><span class='l2'>16</span><span class='l3'>viele</span></span>
     <span class='box'><span class='l1'>sociis</span><span class='l2'>17</span><span class='l3'>weitere</span></span>
     <div class='break'></div>

     <span class='box'><span class='item'>2</span></span>
     <span class='box'><span class='l1'>Fringilla</span><span class='l2'>43</span><span class='l3'>Mit</span></span>
     <span class='box'><span class='l1'>lucilius</span><span class='l2'>44</span><span class='l3'>brausender</span></span>
     <span class='box'><span class='l1'>mel</span><span class='l2'>45</span><span class='l3'>Geschwindigkeit</span></span>
     <span class='box'><span class='l1'>adipiscing</span><span class='l2'>46</span><span class='l3'>war</span></span>
     <span class='box'><span class='l1'>rebum.</span><span class='l2'>47</span><span class='l3'>der</span></span>
     <span class='box'><span class='l1'>Sit</span><span class='l2'>48</span><span class='l3'>Titel</span></span>
     <span class='box'><span class='l1'>nulla</span><span class='l2'>49</span><span class='l3'>des</span></span>
     <span class='box'><span class='l1'>Integer</span><span class='l2'>50</span><span class='l3'>neuen</span></span>
     <span class='box'><span class='l1'>ad</span><span class='l2'>51</span><span class='l3'>Boots</span></span>
     <span class='box'><span class='l1'>volumus,</span><span class='l2'>52</span><span class='l3'>in</span></span>
     <span class='box'><span class='l1'>dicta</span><span class='l2'>53</span><span class='l3'>naher</span></span>
     <span class='box'><span class='l1'>scriptorem</span><span class='l2'>54</span><span class='l3'>Ferne,</span></span>
     <span class='box'><span class='l1'>viderer</span><span class='l2'>55</span><span class='l3'>weshalb</span></span>
     <span class='box'><span class='l1'>lobortis</span><span class='l2'>56</span><span class='l3'>sich</span></span>
     <span class='box'><span class='l1'>est</span><span class='l2'>57</span><span class='l3'>der</span></span>
     <span class='box'><span class='l1'>Utinam,</span><span class='l2'>58</span><span class='l3'>Briefträger</span></span>
     <span class='box'><span class='l1'>enim</span><span class='l2'>59</span><span class='l3'>einen</span></span>
     <span class='box'><span class='l1'>commune</span><span class='l2'>60</span><span class='l3'>roten</span></span>
     <span class='box'><span class='l1'>corrumpit</span><span class='l2'>61</span><span class='l3'>Mantel</span></span>

Answer 1

您需要为此更改 html 结构：我在 html

中做了一些更改

首先添加div来包装第一个盒子的内容和相对于此
将绝对位置添加到编号为 1,2,....的第一个跨度中

.container {
  width: 30em;
}
.box {
  float: left; 
  padding: 0.25em;
  height: 5em;
  border-bottom: 1px black solid;
}
.l1, .l2, .l3 {
  display: block;
}
.l2 {
  color: #bbf; 
  font-size: 0.9em
}
.item {
  font-size: 2em;
  color: #f70;
}
.break {
  clear:both;
}
.main-box {
  position: relative;
  padding-left: 30px;
  margin-bottom: 20px;
  display: table;
}
.main-box .item {
  position:absolute;
  left: 0;
}

<div class='container'>
    <div class="main-box">
     <span class='item'>1</span>
     <span class='box'><span class='l1'>Lorem</span><span class='l2'>1</span><span class='l3'>Dies</span></span>
     <span class='box'><span class='l1'>ipsum</span><span class='l2'>2</span><span class='l3'>ist</span></span>
     <span class='box'><span class='l1'>sapientem</span><span class='l2'>3</span><span class='l3'>ein</span></span>
     <span class='box'><span class='l1'>ne</span><span class='l2'>4</span><span class='l3'>Beispiel</span></span>
     <span class='box'><span class='l1'>neque</span><span class='l2'>5</span><span class='l3'>für</span></span>
     <span class='box'><span class='l1'>dolor</span><span class='l2'>6</span><span class='l3'>einen</span></span>
     <span class='box'><span class='l1'>erat,</span><span class='l2'>7</span><span class='l3'>Blindtext,</span></span>
     <span class='box'><span class='l1'>eros</span><span class='l2'>8</span><span class='l3'>der</span></span>
     <span class='box'><span class='l1'>solet</span><span class='l2'>9</span><span class='l3'>auf</span></span>
     <span class='box'><span class='l1'>invidunt</span><span class='l2'>10</span><span class='l3'>deutsch</span></span>
     <span class='box'><span class='l1'>duo</span><span class='l2'>11</span><span class='l3'>geschrieben</span></span>
     <span class='box'><span class='l1'>Quisque</span><span class='l2'>12</span><span class='l3'>ist.</span></span>
     <span class='box'><span class='l1'>aliquid</span><span class='l2'>13</span><span class='l3'>Es</span></span>
     <span class='box'><span class='l1'>leo.</span><span class='l2'>14</span><span class='l3'>gibt</span></span>
     <span class='box'><span class='l1'>Pretium</span><span class='l2'>15</span><span class='l3'>noch</span></span>
     <span class='box'><span class='l1'>patrioque</span><span class='l2'>16</span><span class='l3'>viele</span></span>
     <span class='box'><span class='l1'>sociis</span><span class='l2'>17</span><span class='l3'>weitere</span></span>
     </div>
     <div class='break'></div>
     <div class="main-box">
     <span class='item'>2</span>
     <span class='box'><span class='l1'>Fringilla</span><span class='l2'>43</span><span class='l3'>Mit</span></span>
     <span class='box'><span class='l1'>lucilius</span><span class='l2'>44</span><span class='l3'>brausender</span></span>
     <span class='box'><span class='l1'>mel</span><span class='l2'>45</span><span class='l3'>Geschwindigkeit</span></span>
     <span class='box'><span class='l1'>adipiscing</span><span class='l2'>46</span><span class='l3'>war</span></span>
     <span class='box'><span class='l1'>rebum.</span><span class='l2'>47</span><span class='l3'>der</span></span>
     <span class='box'><span class='l1'>Sit</span><span class='l2'>48</span><span class='l3'>Titel</span></span>
     <span class='box'><span class='l1'>nulla</span><span class='l2'>49</span><span class='l3'>des</span></span>
     <span class='box'><span class='l1'>Integer</span><span class='l2'>50</span><span class='l3'>neuen</span></span>
     <span class='box'><span class='l1'>ad</span><span class='l2'>51</span><span class='l3'>Boots</span></span>
     <span class='box'><span class='l1'>volumus,</span><span class='l2'>52</span><span class='l3'>in</span></span>
     <span class='box'><span class='l1'>dicta</span><span class='l2'>53</span><span class='l3'>naher</span></span>
     <span class='box'><span class='l1'>scriptorem</span><span class='l2'>54</span><span class='l3'>Ferne,</span></span>
     <span class='box'><span class='l1'>viderer</span><span class='l2'>55</span><span class='l3'>weshalb</span></span>
     <span class='box'><span class='l1'>lobortis</span><span class='l2'>56</span><span class='l3'>sich</span></span>
     <span class='box'><span class='l1'>est</span><span class='l2'>57</span><span class='l3'>der</span></span>
     <span class='box'><span class='l1'>Utinam,</span><span class='l2'>58</span><span class='l3'>Briefträger</span></span>
     <span class='box'><span class='l1'>enim</span><span class='l2'>59</span><span class='l3'>einen</span></span>
     <span class='box'><span class='l1'>commune</span><span class='l2'>60</span><span class='l3'>roten</span></span>
     <span class='box'><span class='l1'>corrumpit</span><span class='l2'>61</span><span class='l3'>Mantel</span></span>
     </div>

Answer 2

这没有调整 HTML，这个 CSS 是相当静态的，因为橙色数字会溢出，如果它比 40px 更宽...如果你可以调整它会更干净HTML，将以橙色数字开头的每个部分放在单独的 div...

中

.container {
  width: 30em;
  display: flex;
  flex-wrap: wrap;
  position: relative;
  padding-left: 40px;
}
.box {
  float: left; 
  padding: 0.25em;
  height: 5em;
  border-bottom: 1px black solid;
}
.container .box:first-child,
.container .break + .box {
  margin-left: -40px;
  width: 40px;
  margin-right: -0.25em;
}
.l1, .l2, .l3 {
  display: block;
}
.l2 {
  color: #bbf; 
  font-size: 0.9em
}
.item {
  font-size: 2em;
  color: #f70;
}
.break {
  clear:both;
  flex: 1 0 calc(100% + 40px + 0.25em);
}

<div class='container'>
     <span class='box'><span class='item'>1</span></span>
     <span class='box'><span class='l1'>Lorem</span><span class='l2'>1</span><span class='l3'>Dies</span></span>
     <span class='box'><span class='l1'>ipsum</span><span class='l2'>2</span><span class='l3'>ist</span></span>
     <span class='box'><span class='l1'>sapientem</span><span class='l2'>3</span><span class='l3'>ein</span></span>
     <span class='box'><span class='l1'>ne</span><span class='l2'>4</span><span class='l3'>Beispiel</span></span>
     <span class='box'><span class='l1'>neque</span><span class='l2'>5</span><span class='l3'>für</span></span>
     <span class='box'><span class='l1'>dolor</span><span class='l2'>6</span><span class='l3'>einen</span></span>
     <span class='box'><span class='l1'>erat,</span><span class='l2'>7</span><span class='l3'>Blindtext,</span></span>
     <span class='box'><span class='l1'>eros</span><span class='l2'>8</span><span class='l3'>der</span></span>
     <span class='box'><span class='l1'>solet</span><span class='l2'>9</span><span class='l3'>auf</span></span>
     <span class='box'><span class='l1'>invidunt</span><span class='l2'>10</span><span class='l3'>deutsch</span></span>
     <span class='box'><span class='l1'>duo</span><span class='l2'>11</span><span class='l3'>geschrieben</span></span>
     <span class='box'><span class='l1'>Quisque</span><span class='l2'>12</span><span class='l3'>ist.</span></span>
     <span class='box'><span class='l1'>aliquid</span><span class='l2'>13</span><span class='l3'>Es</span></span>
     <span class='box'><span class='l1'>leo.</span><span class='l2'>14</span><span class='l3'>gibt</span></span>
     <span class='box'><span class='l1'>Pretium</span><span class='l2'>15</span><span class='l3'>noch</span></span>
     <span class='box'><span class='l1'>patrioque</span><span class='l2'>16</span><span class='l3'>viele</span></span>
     <span class='box'><span class='l1'>sociis</span><span class='l2'>17</span><span class='l3'>weitere</span></span>
     <div class='break'></div>

     <span class='box'><span class='item'>2</span></span>
     <span class='box'><span class='l1'>Fringilla</span><span class='l2'>43</span><span class='l3'>Mit</span></span>
     <span class='box'><span class='l1'>lucilius</span><span class='l2'>44</span><span class='l3'>brausender</span></span>
     <span class='box'><span class='l1'>mel</span><span class='l2'>45</span><span class='l3'>Geschwindigkeit</span></span>
     <span class='box'><span class='l1'>adipiscing</span><span class='l2'>46</span><span class='l3'>war</span></span>
     <span class='box'><span class='l1'>rebum.</span><span class='l2'>47</span><span class='l3'>der</span></span>
     <span class='box'><span class='l1'>Sit</span><span class='l2'>48</span><span class='l3'>Titel</span></span>
     <span class='box'><span class='l1'>nulla</span><span class='l2'>49</span><span class='l3'>des</span></span>
     <span class='box'><span class='l1'>Integer</span><span class='l2'>50</span><span class='l3'>neuen</span></span>
     <span class='box'><span class='l1'>ad</span><span class='l2'>51</span><span class='l3'>Boots</span></span>
     <span class='box'><span class='l1'>volumus,</span><span class='l2'>52</span><span class='l3'>in</span></span>
     <span class='box'><span class='l1'>dicta</span><span class='l2'>53</span><span class='l3'>naher</span></span>
     <span class='box'><span class='l1'>scriptorem</span><span class='l2'>54</span><span class='l3'>Ferne,</span></span>
     <span class='box'><span class='l1'>viderer</span><span class='l2'>55</span><span class='l3'>weshalb</span></span>
     <span class='box'><span class='l1'>lobortis</span><span class='l2'>56</span><span class='l3'>sich</span></span>
     <span class='box'><span class='l1'>est</span><span class='l2'>57</span><span class='l3'>der</span></span>
     <span class='box'><span class='l1'>Utinam,</span><span class='l2'>58</span><span class='l3'>Briefträger</span></span>
     <span class='box'><span class='l1'>enim</span><span class='l2'>59</span><span class='l3'>einen</span></span>
     <span class='box'><span class='l1'>commune</span><span class='l2'>60</span><span class='l3'>roten</span></span>
     <span class='box'><span class='l1'>corrumpit</span><span class='l2'>61</span><span class='l3'>Mantel</span></span>

将 "Three line" 文本与 html 中的缩进对齐

Aligining "Three line" txt with indentation in html

html

css

text-alignment