cómo diseñar texto html con iconos y sangrías

Question

Necesito un ejemplo html / css que dé el siguiente resultado

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

Entonces hay 2 líneas. La primera línea lleva con un tiempo. La segunda línea tiene sangría del mismo ancho para que los iconos se alineen. Los íconos son un poco más grandes que el texto solo para complicar las cosas. A la derecha de cada icono hay un texto que puede ajustarse alineado consigo mismo.

Realmente agradecería algunas ideas de cómo hacer esto.

También estoy buscando una sugerencia sobre cómo conectar los 2 íconos con una línea vertical, de modo que si los íconos fueran círculos, todo aparecería como una barra vertical. Pero esto es quizás demasiado molesto

html css text layout

0

Rhubarb65 9 may. 2019 a las 22:12

Answer 1

Si te entiendo bien, creo que todo debería funcionar con Flex-Box. Tal vez miras css-ticks para inspirarte .

Esto debería funcionar:

.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>

0

SnazzyBean 9 may. 2019 a las 19:55

Answer 2

Mantenga las cosas en su respetado div y flote donde desee.

.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>

1

Painguin 9 may. 2019 a las 19:36

Answer 3

Puede usar la tabla para lograr fácilmente ese diseño.

Para conectar dos iconos por línea vertical, usaría un pseudo selector.

/* 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;
}

Necesitará algunos ajustes, pero tienes la idea.

0

DooM 9 may. 2019 a las 19:34

cómo diseñar texto html con iconos y sangrías

3 respuestas

Nuevas preguntas

html