Aligining "Трехстрочный" текст с отступом в HTML - PullRequest
Новая
       3

Aligining "Трехстрочный" текст с отступом в HTML

0 голосов
/ 12 мая 2018

Мне нужно создать текст, каждая строка которого на самом деле состоит из трех строк: первая строка - латинский текст, вторая - число и третий немецкий текст. Прикрепленный фрагмент выполняет в основном то, что я хочу.

Однако текст структурирован по разделам. В моем примере это будут разделы 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>

Ответы [ 2 ]

0 голосов
/ 12 мая 2018

Это без настройки HTML, этот CSS довольно статичен, так как оранжевое число будет переполнено, если оно будет шире 40px ... Было бы намного чище, если бы вы могли настроить HTML, поместите каждую часть, которая начинается с оранжевое число в отдельном диве ... 

.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>
0 голосов
/ 12 мая 2018

Для этого вам нужно изменить структуру html: У меня есть некоторые изменения в HTML

  1. Сначала добавьте div для переноса содержимого 1-го ящика и положения относительно этого
  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>
...