1

¿Cómo alinear un contenedor hijo a la derecha del contenedor padre? Tengo entendido que con la propiedad 'float: right' del atributo 'style' se podría alinear a su derecha, pero entre padre e hijo no consigo lograrlo. Además quisiera alinearlo un poco más abajo, como a media altura. ¿Hay alguna forma de posicionar el contenedor a ese nivel? Muchas gracias de antemano.

Este sería un ejemplo visual del resultado esperado:

introducir la descripción de la imagen aquí

Este sería parte del código (sin obtener el resultado esperado ya que los contenedores se sitúan seguidos en vertical):

<?php
$id= 1;
$div1 = $dom2->getElementById($id);
$div2 = $dom2->createElement('div', 'Texto');
$div2->setAttribute('style', 'float: right; background-color: #FFFF00; width: 250px;');
$div1->appendChild($div2);
?>
4
  • Quieres entonces que horizontalmente queden en los extremos no? izquierda y derecha y verticlamente al medio?
    – BetaM
    el 14 nov. 2020 a las 20:26
  • Ok, pero entonces la distribución que buscas si es como la que indico en mi otro comentario?
    – BetaM
    el 14 nov. 2020 a las 20:29
  • Exacto...Así es.
    – Pablo
    el 14 nov. 2020 a las 20:30
  • Yo creo que falta mas información, principalmente el código html que te genera al final, o donde incrustas esos divs, ya que la solución depende de los parents. el 14 nov. 2020 a las 21:01

1 respuesta 1

0

Me parece que:

  • En lugar de volver a los elementos flotantes, deberías volverlos cajas flexibles
    • Con esto en mente podrás indicar su distribución sobre el main axis, en este caso parece ser que la propiedad y valor conveniente para ese caso es: justify-content: space-between;
  • Por otro lado los 2 divs que muestran nos son padre e hijo, para que eso se cumpliera debería el segundo estar declarado dentro del primero, en todo caso son etiquetas hermanas

Propuesta:

    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .contenedor-principal {
        border: 1px solid crimson;
        display: flex;
        justify-content: space-between;
        margin: 0 auto;
        width: 300px;
      }
    </style>
    
    <div class="contenedor-principal">
      <div id="contenedor1">
        Contenedor 1
      </div>
      <div id="contenedor2">
        Contenedor 2
      </div>
    </div>

Aclaraciones:

  • El ancho dado solo es representativo y depende enteramente de lo que se ajuste a tu maquetación final.

Consideré esta propuesta ya que si continuamos con floats (que si son útiles) debemos tener presente que:

  • El elemento el sacado del flujo regular de los elementos
  • Debemos dar una instrucción a cada uno de los div para indicarle si estará a la izquierda o derecha
  • Para que el div padre los pueda contener dentro de sí, sería necesario agregarle un overflow: auto;

Ejemplo

    <style>
      .contenedor {
        border: 1px solid teal;
        overflow: auto;
        margin: 0 auto;
        width: 300px;
      }
      .contenedor-dos {
        float: right;
      }
      .contenedor-uno {
        float: left;
      }
    </style>
    
    <div class="contenedor">
      <div class="contenedor-uno">
        Contenedor 1
      </div>
      <div class="contenedor-dos">
        Contenedor 2
      </div>
    </div>

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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