0

Tengo un encabezado que muestra un título y un contador de tiempo estimado de lectura realizado con simple HTML y CSS. El problema es que los mismos se encuentran desalineados y quiero intentar que se muestren correctamente independientemente de la resolución del dispositivo.

Les dejo imágenes y el código.

Así es como se ve:

introducir la descripción de la imagen aquí

En la versión móvil de la página se muestra de la anterior manera.

En la siguiente imagen muestro lo que quisiera corregir:

introducir la descripción de la imagen aquí

Simplemente que el título se muestre separado del contador de tiempo estimado.

Código:

  .title {
        padding: 20px 36px;
        background: radial-gradient(circle,#e9f6fb 0.10%,#f1f1f1);
        border-radius: 25px;
        box-shadow: rgba(68,68,68,0.20) 0 3px 50px 0;
        }
        .estimated-time {
        color: #32323a;
        cursor: default;
        float: right;
        font-size: 17px;
        text-align: center;
        user-select: none;
        }
        .url {
        font-weight: 700;
        color: #32323a;
        text-decoration: none;
        }
<div class="title">
    
    <h2 style="font-size:20px">
    
    <strong class="estimated-time"><em class="fa-stopwatch far" style="padding-right:5px">&nbsp;</em>2'</strong>
    
    <a class="url" href="https://www.example.com/">Example title</a>
    
    </h2>

    </div>

Es un código demasiado sencillo, pero no logro resolver este problema, si sabes de algo se agradece mucho.

3
  • 1
    Para manejar la posición del contenido de manera dinámica (especialmente con dispositivos móviles), te recomiendo que uses flexbox. Este es un buen tutorial pero está en inglés. También puedes echarle un ojo a este en español. Mucha suerte!
    – FranAcuna
    Commented el 13 jul. 2020 a las 4:03
  • 1
    Los elementos <strong> y <a> son elementos inline. Si los quieres en líneas separadas hazlos display:block; Además el <strong > tiene float: right; Utiliza text-align:right y borra el float
    – enxaneta
    Commented el 13 jul. 2020 a las 7:03
  • Según entendí quieres ordenar el contador respecto al titulo, entonces no es mas fácil crear un div aparte que contenga el contador y ese alinearlo
    – tive02
    Commented el 13 jul. 2020 a las 23:32

1 respuesta 1

0

Para conseguirlo utilizaremos flexbox, lo primero será modificar la estructura HTML para que el padre flex tenga dos hijos.

Llegado a este punto tendremos dos especies de columnas (por los dos hijos), pero su espacio se dividirá a partes iguales, por lo cual le asignaremos la propiedad flex-grow en 1 al hijo que queremos que se estire para ocupar el espacio disponible.

El código se verá algo así, puedes leer más de flexbox acá: Conceptos Básicos de flexbox

.title {
        padding: 20px 36px;
        background: radial-gradient(circle,#e9f6fb 0.10%,#f1f1f1);
        border-radius: 25px;
        box-shadow: rgba(68,68,68,0.20) 0 3px 50px 0;
        display: flex;
        }
        .grow-1{
            flex-grow: 1;
        }
        .estimated-time {
        color: #32323a;
        cursor: default;
        float: right;
        font-size: 17px;
        text-align: center;
        user-select: none;
        }
        .url {
        font-weight: 700;
        color: #32323a;
        text-decoration: none;
        }
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="title">
        <h2 style="font-size:20px" class="grow-1">
            <a class="url" href="https://www.example.com/">El 63 % de los uruguayos aprueba la gestión del presidente luis lacalle pou</a>
        </h2>
        <strong class="estimated-time"><em class="fa-stopwatch far" style="padding-right:5px">&nbsp;</em>2'</strong>
    </div>
</body>
</html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.