1

Estoy haciendo una página — será una presentacion para mi equipo de trabajo — y quiero hacer que un <p> y un <h4> esté a la misma posición vertical que otro <h4> y <p> pero en una posición horizontal diferente.

La idea es transformar esto:

introducir la descripción de la imagen aquí

A esto:

introducir la descripción de la imagen aquí

Estos son los códigos:

CSS:

#title /* Esto es el titulo principal */ {
    font-size: 65px;
    font-family: monospace;
    color: red;
    background-color: black;
}

#sub-title /* Este es el subtitulo con "" */ {
    font-size: 35px;
    font-family: monospace;
    color: red;
    background-color: black;
}

#parraf1 /* Esto es el "¿QUIENES SOMOS?" */ {
    font-size: 27.5px;
    font-family: monospace;
    color: red;
    background-color: black;
    margin-left: 40px;
}

#parraf2 /* Esto es el "¿QUE HACEMOS?" */ {
    font-size: 27.5px;
    font-family: monospace;
    color: red;
    background-color: black;
    margin-left: 40px;
}

#parraf1description /* Esta es la descripcion del "¿QUE HACEMOS?" */ {
    font-size: 23.5px;
    font-family: monospace;
    color: red;
    background-color: black;
    margin-left: 60px;
}

#parraf2description /* Esta es la descripcion del "¿QUE HACEMOS?" */ {
    font-size: 22.5px;
    font-family: monospace;
    color: red;
    background-color: black;
    margin-left: 60px;
}

body {
    background-color: black;
}

¿Cómo hago para hacer lo que quiero?

1
  • hay falta gente... coloca tambien el html, para poder ayudarte.. Commented el 17 dic. 2021 a las 19:57

1 respuesta 1

2

Puedes solo usar un contenedor grid, de manera que puedes acomodar un contenedor al lado del otro.

CSS Grid layout contiene funciones de diseño dirigidas a los desarrolladores de aplicaciones web. El CSS grid se puede utilizar para lograr muchos diseños diferentes. También se destaca por permitir dividir una página en áreas o regiones principales, por definir la relación en términos de tamaño, posición y capas entre partes de un control construido a partir de primitivas HTML.

.grid-container {
  display: grid;
  grid-template-columns: auto auto;
}

.grid-container > div {
  padding: 10px;
}

/* 
  Usa un media query para hacer que el grid sea adaptable a dispositivos móviles 
*/

@media (max-width:600px) {
  .grid-container {
    grid-template-columns: auto;
  }
}
<div class="grid-container">
  <div>
    <!-- Aquí va el contenido -->
    <h3>¿Quienes somos?</h3>
    <p>...</p>
  </div>
  <div>
    <!-- Aquí va el contenido -->
    <h3>¿Qué hacemos?</h3>
    <p>...</p>
  </div>
  <div>
    <!-- Aquí va el contenido -->
    <h3>Fila 2</h3>
    <p>...</p>
  </div>
  <div>
    <!-- Aquí va el contenido -->
    <h3>Fila 2</h3>
    <p>...</p>
  </div>
</div>

6
  • Gracias, ya funciona! Commented el 17 dic. 2021 a las 20:56
  • Pero ¿Si quiero hacer lo mismo abajo? Osea si añado uno a la derecha, uno a la izquierda, y luego quiero hacer lo mismo abajo, como hago? Commented el 17 dic. 2021 a las 23:01
  • @Skeletoos57 Solamente añade más etiquetas <div> al grid, o añade otro contenedor.
    – Rodrigo
    Commented el 18 dic. 2021 a las 0:46
  • Podrias editar tu respuesta para hacer lo que te digo si no es molestia? Es q lo intente y no funciono Commented el 18 dic. 2021 a las 1:19
  • @Skeletoos57 He actualizado mi respuesta, comprueba si es lo que buscas.
    – Rodrigo
    Commented el 18 dic. 2021 a las 2:53

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.