es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Cómo puedo reorganizar los segmentos DIV horizontalmente?

12 Jul, 2023 Programación

Tengo esta estructura de divs y no puedo cambiarlos

<div>
  <header>Header</header>
  <p>Paragraph</p>
  <div>
    <div>FirstDiv</div>
    <div>SecondDiv</div>
  </div>
</div>

y necesito replicar la interfaz de usuario de la primera captura de pantalla en la segunda.
Sería fácil si pudiera tener el encabezado y el párrafo en un solo div para poder usar flex-box.
Pero ahora no sé cuál es la solución más sencilla…
enter image description here

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para replicar la interfaz de usuario desde la primera captura de pantalla a la segunda, se pueden seguir los siguientes pasos:

    1. Primero, tenemos que crear un contenedor div que envuelva los elementos header y p dentro de un div.
    2. Luego, crearemos otro contenedor div para contener los dos divs que están actualmente dentro del div existente.
    3. Después de eso, podemos utilizar flex-box en el contenedor externo div para posicionar los elementos de la manera deseada.

    La estructura actualizada se verá así:

    <div class="container">
  <div class="inner-wrapper">
    <header>Encabezado</header>
    Párrafo
  </div>
  <div class="outer-wrapper">
    <div>PrimerDiv</div>
    <div>SegundoDiv</div>
  </div>
</div>

    El css para la estructura actualizada puede ser:

    .container {
  display: flex;
  flex-direction: column;
}

.inner-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.outer-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

    Utilizando esta estructura actualizada con las propiedades de flex-box, podemos lograr la interfaz de usuario deseada como se muestra en la segunda captura de pantalla.

Comments are closed.