0

quería ver si me podrían ayudar con un asunto de items en css, lo que estoy haciendo es crear un contenedor con 2 hijos que son los items, cada uno abarcaría la mitad del contenedor pero al mostrar en pantalla el "hijo 2" se coloca a continuación con un salto de línea:

El código css que estoy utilizando es el siguiente:

div.contenedor {
  margin-top: 2rem;
  margin-bottom: 2rem;
  height: 5rem;
  border: 1px solid black;
  align-items: baseline;  <-- con este pensaba que se acomodaría justo a un lado sobre la misma línea
}

div.hijo1 {   
  width: 19rem;
  text-align: center;
  border: 1px solid black;
}

div.hijo2 {
  width: 19rem;
  margin-left: auto;
  text-align: center; 
  border: 1px solid black;
  align-self: flex-start;
}
    <div class='contenedor'>
        <div class='hijo1'>
            CONTENIDO EN CUADRO
        </div>
        <div class='hijo2'>
            CONTENIDO EN CUADRO
        </div>
    </div>

Y me arroja lo siguente (adjunto imagen porque es un pdf):

introducir la descripción de la imagen aquí

3 respuestas 3

2

Creo que te falto colocar en flex en el contenedor padre, tu que tu div ocupaba siempre todo el ancho del mismo intenta así

    div.contenedor {
      display: flex;
      margin-top: 2rem;
      margin-bottom: 2rem;
      border: 1px solid black;
      height: 10rem;
      
    }

    div.hijo1 {   
      width: 19rem;
      text-align: center;
      border: 1px solid black;
      align-self: flex-start;
    }

    div.hijo2 {
      width: 19rem;
      margin-left: auto;
      text-align: center; 
      border: 1px solid black;
      align-self: flex-start;
    }
1

Vale a ver, hay varias maneras de hacerlo si te vale cualquiera yo elegiria hacer flexbox. (si no es el caso respondeme y te explico la manera con inline-block o grid)

Hacerlo con flex seria

1º añadiendo la propiedad display: flex; al padre que es div.contenedor. Esto hara que se colocan en linea por asi decirlo.

2º dandole a cada hijo un width de 50% para que ocupe cada uno la mitad del padre (Para que el padre ocupe todo su espacio usa width: 100%; pero si va despues del body "de normal" es block y ocupara todo) TEN EN CUENTA que usar esas cantidades altas de rem no hara que ocupe la mitad siempre o incluso en algunas pantallas se pasara, no es una buena manera de hacerlo responsive

3º (dependiendo) a veces los divs en blocks si no juntas las etiquetas de los hijos hay un mini espacio en blanco que ocupa un x% y al sumar 50 + 50 + x dara mas de 100 y el hijo saltara de linea. Para verlo mejor puedes ver esta pregunta esto suele pasar cuando se usa display: block; aunque usando en este caso display:flex;no deberia pasar, en el caso que pasase esto podria arreglarlo sencillo.

div.contenedor {
  display: flex;
  margin-top: 2rem;
  margin-bottom: 2rem;
  height: 5rem;
  border: 1px solid black;
}

div.hijo1 {   
  width: 100%;
  text-align: center;
  border: 1px solid black;
}

div.hijo2 {
  width: 100%;
  margin-left: auto;
  text-align: center; 
  border: 1px solid black;
}
<div class='contenedor'>
        <div class='hijo1'>
            CONTENIDO EN CUADRO
        </div><div class='hijo2'>
            CONTENIDO EN CUADRO
        </div>
    </div>

0

Mira, puedes hacer esto:

A las dos clases hijo le agregas un "float:left;"

div.hijo1 {   
  float:left;
}

div.hijo2 {
  float: left;
}

y en el div que contiene a los dos, osea el padre, agregale una nueva clase llamada "clearfix", esto del clearfix es un hack desde hace muchos años, te lo paso:

.clearfix:before,
.clearfix:after {
  content: ".";    
  display: block;    
  height: 0;    
  overflow: hidden;        
}
.clearfix:after { clear: both; }
.clearfix { zoom: 1 ;} /* IE < 8 */

Y eso arreglará el problema.

A continuación te muestro como aplicarlo, saludos!

.contenedor {
  margin-top: 2rem;
  margin-bottom: 2rem;
  height: 5rem;
  border: 1px solid black;
  width: 100%;
}

.hijo1 {   
  width: 49%;
  text-align: center;
  border: 1px solid black;
  float:left;
}

.hijo2 {
  width: 49%;
  text-align: center; 
  border: 1px solid black;
  float:left;
}

.clearfix:before,
.clearfix:after {
  content: ".";    
  display: block;    
  height: 0;    
  overflow: hidden;        
}
.clearfix:after { clear: both; }
.clearfix { zoom: 1 ;} /* IE < 8 */
<div class='contenedor clearfix'>
        <div class='hijo1'>
            CONTENIDO EN CUADRO
        </div>
        <div class='hijo2'>
            CONTENIDO EN CUADRO
        </div>
</div>

2
  • aunque el float pues existe, no es considerado hoy en dia buenas practicas ya que su "evolucion" y extension display: flex es mucho mejor opcion. Float puede causar problemas en responsive y visualizacion, y aunque la propiedad clear se creo para solucionar detalles de este, no solventa todos los casos. Si solo tienes que ponerlo a la derecha un display-flex y justify-content right lo hace y mas maneras que tiene
    – FranyxD
    el 8 oct. 2022 a las 17:32
  • Tienes razón, de hecho si alguien tiene alguna duda, aquí puede ver un ejemplo: w3schools.com/css/tryit.asp?filename=trycss3_flexbox
    – itcaso
    el 28 oct. 2022 a las 22:56

Tu Respuesta

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

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