Posicionar un div al lado de otro según el ancho de la pantalla

publicado por: Anonymous

Tengo una duda . Me pregunto cual es la manera de posicionar un div al lado de otro div . Pero si cambia el ancho de la pantalla uno de los div se posicione debajo del otro y sean adaptables al ancho de la pantalla .

.contenido {
display: flex; 
flex-direction: row;
 background-color: #e9e9e9; 
height: 100%;
max-width:800px;
background-color: #fff;
color: #FDFFFF;

}

#inner {
    margin:  1px;
    width: 100%;
    background: black;
    border-radius: 5px;
    padding: 40px;
    display: inline;
    color: #FDFFFF;
    justify-content: center; 
margin: 1px; 
white-space: nowrap; 
overflow: hidden; 
text-overflow: ellipsis;
    }



@media screen and (max-width: 480px) {
  #inner {
    width: calc(100%);
  }
}


</style>

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">


 <div class="contenido">
    <div id="inner">div 1</div>
    <div id="inner">div 2</div>
</div>

Lo que busco es que los

div inner

estén uno al lado del otro pero que igual al reducir el ancho de pantalla uno de ellos se coloque bajo el otro

solución

Bueno se me ocurre lo siguiente

Corrección a la aplicación del atributo id

Los id son elementos únicos, por lo cual aplicarlos a mas de un elemento se considera algo incorrecto, entonces tu código debería utilizar class que es aplicar un identificador a mas de un elemento

<div class='contenedor'>
 <div class="contenido">
    <div class="inner">elemento de texto 1</div>
    <div class="inner">elemento de texto 2</div>
  </div>
</div>

Aplicación de CSS GRID

Puedes crear una rejilla con ayuda de CSS Grid para que de este modo cconstruyas lo que estás buscando

.contenido{
      display: grid;
      grid-template-columns: 1fr 1fr;
    }

ACLARACIONES

  • display: grid; Genera una grilla o rejilla a nivel de bloque
  • grid-template-columns Genera la cantidad de columnas que obtendremos, al usar 1fr 2 veces obtenemos 2 columnas

HACIÉNDOLO RESPONSIVE

Finalmente para hacerlo responsive aplica una media query de este modo

 @media screen and (max-width: 480px) {
      .contenido{
        grid-template-columns: 1fr;
        color: red;
      }
    }
  • Ahora para lograr que un div quede debajo del otro aplicamos de nuevo grid-template-columns pero esta vez le asignamos el valor de 1fr que generará una sola columna

Todo el código al final se debe ver así

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
    .contenido{
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-gap: 2px;
    }

    @media screen and (max-width: 480px) {
      .contenido{
        grid-template-columns: 1fr;
        color: red;
      }
    }
  </style>
</head>
<body>
<div class='contenedor'>
 <div class="contenido">
    <div class="inner">elemento de texto 1</div>
    <div class="inner">elemento de texto 2</div>
  </div>
</div>
</body>
</html>

Revisa el ejemplo funcional

Respondido por: user75901

Leave a Reply

Your email address will not be published. Required fields are marked *