1

introducir la descripción de la imagen aquí

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheets" type="text/css" href="styles.css">
    <script src="https://kit.fontawesome.com/d57b664376.js" crossorigin="anonymous"></script>

</head>

<body>
    <div class="post">
        <div class="post-header">
            <div>
                <i class="fa-brands fa-html5"></i>
            </div>
            <div class="container"> /* Aqui es el asunto, necesito que esto quede mas a la derecha como en la imagen */
                <h3>HTML5</h3>
                <p>Rigoberto</p>
            </div>


<div class="container3">
            <i class="fa-solid fa-ellipsis-vertical"></i>
        </div>
    </div>

    <div class="post-image">
        <img src="https://i.pinimg.com/736x/c2/4f/46/c24f4667c9fcca6d1dad8ded5dcc6fc4--blog-html.jpg">
    </div>
    <div class="post-body">
        <div class="icons">
            <div>
                <i class="fa-regular fa-heart"></i>
                <i class="fa-regular fa-comment"></i>
                <i class="fa-regular fa-paper-plane"></i>
                <i class="fa-regular fa-bookmark"></i>
            </div>
            <div class="texto">
                <p>text</p>
            </div>
        </div>
    </div>
</div>

Quiero mover un bloque div hacia la derecha y así quede como en la imagen.

Ya probé position: relative; también text-align.. ¿Qué más podría intentar hacer?

¿Me faltara alguna propiedad? Noto que no he usado width, height, padding, color.

Llevo horas probando cosas en algo fallo :(

0

1 respuesta 1

0

Volví a nombrar el nombre de tus clases para que se entienda mejor como está estructurado la posición y anchos de tus elementos.

Tenemos a la clase container que encierra a las 3 partes de adentro, en donde cada parte contiene lo siguiente:

  <div class="container">
    <div class="part1">
      <i class="fa fa-html5"></i>
    </div>
    <div class="part2">
      <h3>HTML5</h3>
      <p>Rigoberto</p>
    </div>
    <div class="part3">
      <i class="fa-solid fa-ellipsis-vertical"></i>
    </div>
  </div>

// .part1 => es tu ícono html
// .part2 => es el texto <h3> y <p>
// .part3 => son los 3 puntos verticales

Y a esta clase container le damos la propiedad de display: flex para que los elementos que están dentro sean flexibles y se posicionen uno al lado del otro. También le di la propiedad de justify-content: space-between; para que los elementos que están dentro ocupen todo el ancho y tengan espacios entre ellos:

.container {
    /* centramos el contenido */
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    /* le damos un ancho y que sea flexible */
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

Ahora a cada una de estas partes tendrán un ancho específico y ciertos tamaños para que el resultado sea similar a la imagen adjuntada:

.part1 {
    width: 10%;
    font-size: 30px;
}

.part2 {
    width: 90%;
}

.part3 {
    width: 0%;
    font-size: 30px;
}

Tu resultado final sería el siguiente:

/* ===== general ===== */

* {
    margin: 0;
    padding: 0;
}

body {
    padding: 20px;
}

/* ===== contenido general ===== */

.container {
    /* centramos el contenido */
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    /* le damos un ancho y que sea flexible */
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* ===== partes del contenido ===== */

.part1 {
    width: 10%;
    font-size: 30px;
}

.part2 {
    width: 90%;
}

.part3 {
    width: 0%;
    font-size: 30px;
}
<script src="https://kit.fontawesome.com/d57b664376.js" crossorigin="anonymous"></script>

<body>
  <div class="container">
    <div class="part1">
      <i class="fa fa-html5"></i>
    </div>
    <div class="part2">
      <h3>HTML5</h3>
      <p>Rigoberto</p>
    </div>
    <div class="part3">
      <i class="fa-solid fa-ellipsis-vertical"></i>
    </div>
  </div>
</body>

Tu Respuesta

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