在html中将“三行”文本与缩进对齐

问题描述 投票：0回答：2

我需要创建文本，其中每行实际上包含三行：第一行是拉丁文本，第二行是数字，第三行是德语文本。附加的片段主要是我想要的。

但是，文本是按部分组织的。在我的样本中，这些将是第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>
html css text-alignment
2个回答
3
投票

您需要更改html结构：我在html中做了一些更改

  1. 首先添加div以包装第一个框内容并相对于此位置
  2. 向第一个跨度添加绝对位置，其数量为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>
0
投票

这是在没有调整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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.