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

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.