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
3 respuestas
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>
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>
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.
Nuevas preguntas
html
HTML (HyperText Markup Language) es el lenguaje de marcado para crear páginas web y otra información que se mostrará en un navegador web. Las preguntas sobre HTML deben incluir un ejemplo mínimo reproducible y una idea de lo que está tratando de lograr. Esta etiqueta rara vez se usa sola y, a menudo, se combina con [CSS] y [javascript].