Как сделать HTML-текст с иконками и отступами

Question

Мне нужен пример html / css, который дает следующий результат

23:59 icon Some text which can wrap
           like this
      icon Some text which can wrap
           like this

Итак, есть 2 строки.Первая строка ведет со временем.2-я строка имеет одинаковую ширину, чтобы значки совпали.Значки немного больше, чем текст, чтобы все было сложнее.Справа от каждого значка находится текст, который может быть перенесен в соответствие с самим собой.

Буду очень признателен за некоторые идеи, как это сделать.

Я также ищу предложение, как соединить 2 иконки вертикальной линией, чтобы, если иконки были кружками, то всебудет выглядеть как вертикальная штанга.Но это может быть слишком много беспокоит

Answer 1

Держите вещи в своих уважаемых div и отправляйте их туда, где вы хотите.

.wrapper {
    float: left;
}

div {
    padding-right: 5px;
}

span {
  float: right;
  padding-left: 15px;
  width: 180px;
}

<div class="wrapper">
    <div>
        23:59
    </div>
</div>
<div class="wrapper">
    <div>
        icon
        <span>Some text which can wrap like this</span>
    </div>
    <div class="wrapper">
        icon
        <span>Some text which can wrap like this</span>
    </div>
</div>

Answer 2

Если я вас правильно понимаю, я думаю, что все должно работать с Flex-Box.Может быть, вы посмотрите на css-ticks , чтобы получить вдохновение.

Это должно работать:

.flex-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}

i {
  font-size: 2rem
}

div {
  padding: 6px
}

<link href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" rel="stylesheet"/>

<div class="flex-row">
  <div>12:30</div>
  <div>
    <i class="fas fa-check"></i>
  </div>
  <div>Lorem ipsum dolor set amet..</div>
</div>

<div class="flex-row">
  <div>12:30</div>
  <div>
    <i class="fas fa-times"></i>
  </div>
  <div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam..</div>
</div>

Answer 3

вы можете использовать таблицу, чтобы легко достичь этого макета.

Чтобы соединить две иконки вертикальной линией, я бы использовал псевдоселектор.

/* Selects pseudo element :before on every second icon */
.icon:nth-child(even)::before {
 content: '';
 display: block;
 width: 1px;
 height: 20px;
 background: #000;
 position: relative;
 top: -20px;
}

Потребуются некоторые настройки, но у вас есть идея.