¿Cómo bloquear un div en la parte superior y al mismo tiempo bloquear el contenido en la parte inferior del div?

Resuelto jeremywat asked hace 10 meses • 0 respuestas

Estoy convirtiendo archivos a PDF usando Pandoc y estoy usando HTML/CSS para diseñar los documentos, por lo que todo se aplicará solo para impresión y no para pantalla.

Quiero replicar el "encabezado" de un documento de Word. Creé un divy estoy usando esto para que aparezca en la parte superior de cada página:

.div_header {
    position: fixed;
    top: 0;
    width: 100%;
}

Dentro div_header, quiero 3 columnas: una imagen alineada completamente hacia la izquierda, una categoría centrada en el medio y 2 elementos (título del documento y número de versión) alineados completamente hacia la derecha. Quiero que se vea así: ingrese la descripción de la imagen aquí

Esto es lo que tengo hasta ahora:

<div style="border: 1px solid black" class="div_header">
  <div>
    <img
      class="left bottom"
      src="images/my_image.png"
      alt="My Image"
    />
  </div>
  <div class="center bottom">Category</div>
  <div class="right bottom">
    <div class="right-text bottom">Title</div>
    <br />
    <div class="right-text bottom">Version 0.24</div>
  </div>
</div>

.div_header {
  position: fixed;
  top: 0;
  display: flex;
  width: 100%;
  justify-content: space-between;
}
.center {
  margin: 0 auto;
  text-align: center;
}
.left {
  float: left;
}
.right {
  float: right;
}
.right-text {
  text-align: right;
}
.bottom {
  bottom: 0;
}

Esto sale con este aspecto: ingrese la descripción de la imagen aquí

La imagen parece estar ajustada hacia abajo, pero la Categoría, el Título y la Versión están alineados hacia arriba, a pesar de tener el bottom: 0conjunto. ¿Cómo hago para que todos se alineen con la parte inferior?

jeremywat avatar Feb 16 '24 14:02 jeremywat
Aceptado

Solo necesita agregar with align-items: end;en display: flex;el div principal.

Esta alineación de elementos establecerá los elementos de contenido al final verticalmente, es decir, en la parte inferior.

Consulte esto: https://codepen.io/krushna-28/pen/NWJojyX Eliminé el código agregado innecesariamente

Tenga en cuenta:

  1. No utilices float ya que está desactualizado.
  2. Agregaste bottom: 0que era correcto pero no funcionará position: relative;, solo necesitas agregarposition: absolute;

Gracias

body {
  margin: 0;
}
.div_header {
  position: fixed;
  top: 0;
  display: flex;
  align-items: end;
  width: 100%;
  height: 400px;
  justify-content: space-between;
}
.center {
  margin: 0 auto;
  text-align: center;
}
.right-text {
  text-align: right;
}
<div style="border: 1px solid black" class="div_header">
  <div>
    <img class="left bottom" src="images/my_image.png" alt="My Image" />
  </div>
  <div class="center bottom">Category</div>
  <div class="right bottom">
    <div class="right-text bottom">Title</div>
    <div class="right-text bottom">Version 0.24</div>
  </div>
</div>
Expandir fragmento

Krushna avatar Feb 16 '2024 07:02 Krushna