Cómo hacer que los div box sean responsivos

  • Autor Autor eugeniocol
  • Fecha de inicio Fecha de inicio
E

eugeniocol

Curioso
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Hola buenas.

Como puedo hacer de estos cuatro div box1 y 2 estan en la msima posicion de altura uno a derecha y otro a izquierda al igual que box3 y 4, que al cambiar de tamaño de pantalla de mas a menos,llega un momento que se montan encima unio de otro y es hacer que el div box2 se coloque debajo de box1 igualmente box3 debajo del 4

Insertar CODE, HTML o PHP: 
#box1 {
	background-color:#0C0;
	position:absolute;
	top: 50px;
	left:50px;
	width:300px; /*width:300px;*/
	height:50px;
}

#box2 {
	background-color:#FC0;
	position:absolute;/* position:absolute;	*/
	top: 50px;
	right:50px;
	width:90px; /*width:90px;*/
	height:50px;
}

#box3 {
	background-color:#F30;
	position:absolute;
	bottom: 50px;
	right: 50px;
	width:300px;
	height:50px;
}

#box4 {
	background-color:#F9F;
	position:absolute;
	bottom: 50px;
	left: 50px;
	width:90px;
    height:50px;
}

Saludoss.
 
las posiciones absolutas no son responsive amigo :S usa flexbox.
 
Un div con posición absoluta SÍ puede adaptarse a cualquier tamaño de pantalla, averigua que es un media query, y si aún tienes dudas vuelve a preguntar por que lo que pides es muy fácil de hacer,,,
 
Usa flexbox o de perdida inline-block o floats con media queries.

Sería algo así con flexbox
Insertar CODE, HTML o PHP: 
<style>
/*CSS*/

.contenedor 
{
/*propiedades que quieras*/

display: flex;
justify-content: space-around;
flex-wrap: wrap;
}

#box1{/*propiedades que quieras*/...}

#box2{/*propiedades que quieras*/...}

#box3{/*propiedades que quieras*/...}

#box4{/*propiedades que quieras*/...}

</style>

<!-- HTML --> 

<div class="contenedor">
      <div id="box1">...</div>
      <div id="box2">...</div>
      <div id="box3">...</div>
      ...
</div>
 
Charlie Araiza dijo:
Usa flexbox o de perdida inline-block o floats con media queries.

Sería algo así con flexbox
Insertar CODE, HTML o PHP: 
<style>
/*CSS*/

.contenedor 
{
/*propiedades que quieras*/

display: flex;
justify-content: space-around;
flex-wrap: wrap;
}

#box1{/*propiedades que quieras*/...}

#box2{/*propiedades que quieras*/...}

#box3{/*propiedades que quieras*/...}

#box4{/*propiedades que quieras*/...}

</style>

<!-- HTML --> 

<div class="contenedor">
      <div id="box1">...</div>
      <div id="box2">...</div>
      <div id="box3">...</div>
      ...
</div>
Hacer clic para expandir...

pues algo no entiendo o estoy haciendo mal tal cual pones los codigos se montan los div al estrechar la pantalla del navegador

HTML: 
<div class="contenedor">       
              <div id="box1"><center>prueba1</center></div> 
              <div id="box2"><center>prueba2</center></div> 
              <div id="box3"><center>prueba3</center></div> 
              <div id="box4"><center>prueba4</center></div> 
         </div>

Insertar CODE, HTML o PHP: 
<style>
/*CSS*/
.contenedor {/*propiedades que quieras*/
    background-color:#0C0;
	width:auto; /*width:300px;*/
	height:auto;	
    display:flex;
    justify-content:space-around;
    flex-wrap:wrap;
}

#box1 {
	background-color:#0C0;
	position:absolute;
	top: 50px;
	left:50px;
	width:300px; /*width:300px;*/
	height:50px;
}

#box2 {
	background-color:#FC0;
	position:absolute;/* position:absolute;	*/
	top: 50px;
	right:50px;
	width:90px; /*width:90px;*/
	height:50px;
}

#box3 {
	background-color:#F30;
	position:absolute;
	bottom: 50px;
	right: 50px;
	width:300px;
	height:50px;
}

#box4 {
	background-color:#F9F;
	position:absolute;
	bottom: 50px;
	left: 50px;
	width:90px;
    height:50px;
}
	
</style>

en cuanto a las medidas query me parece ver en google que hay una gran variedad,yo pensaba que con esto se solucionaba:
HTML: 
<meta name="viewport" content="width=device-width; user-scalable=no; initial-scale=1; maximun-scale=1; minimun-scale=1">

Saludoss.

- - - Actualizado - - -

Charlie Araiza dijo:
Usa flexbox o de perdida inline-block o floats con media queries.

Sería algo así con flexbox
Insertar CODE, HTML o PHP: 
<style>
/*CSS*/

.contenedor 
{
/*propiedades que quieras*/

display: flex;
justify-content: space-around;
flex-wrap: wrap;
}

#box1{/*propiedades que quieras*/...}

#box2{/*propiedades que quieras*/...}

#box3{/*propiedades que quieras*/...}

#box4{/*propiedades que quieras*/...}

</style>

<!-- HTML --> 

<div class="contenedor">
      <div id="box1">...</div>
      <div id="box2">...</div>
      <div id="box3">...</div>
      ...
</div>
Hacer clic para expandir...


despues de postear acabo de ver esto Guía de Flexbox CSS3, creando estructuras flexibles facilmente. que creo que es lo que ando buscando siguiendo tu comentario.

Salud2.
 
Última edición:
Bueno. Si quieres usar "position: absolute" tienes que usar media queries forzosamente.

Con flexbox sería así:

HTML: 
<!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>

         body
         {
             display: flex;
             flex-direction: column;
             justify-content: space-between;
             margin: 0;
             height: 100%;

             position:absolute; width:100%;             
         }   

         .contenedor
         {
             width: 100%;

             display: flex;
             justify-content: space-between;
             flex-wrap: wrap;
         }
         
         .margin
         {
              margin: 2rem;
         }


         #box1
         {
             background-color:#0C0;
             width:300px;
             height:50px;
             order:1;
         }   

         #box2 
         {
           background-color:#FC0;
           width:90px; /*width:90px;*/
           height:50px;
           order: 2;
        }

        #box3 {
           background-color:#F30;
           /*max-width:300px;*/
            width: 300px;
            height: 50px;
             order: 2;
        }

        #box4 {
              background-color:#F9F;
              width:90px;
              height:50px;
              order: 1;
        }

	
</style>
    </head>
    <body>
         <div class="contenedor">
             <div id="box1" class="margin">1</div>
             <div id="box2" class="margin">2</div>
         </div>
         <div class="contenedor">
              <div id="box3" class="margin">3</div>
              <div id="box4" class="margin">4</div>
         </div>     
    </body>
</html>



eugeniocol dijo:
pues algo no entiendo o estoy haciendo mal tal cual pones los codigos se montan los div al estrechar la pantalla del navegador

HTML: 
<div class="contenedor">       
              <div id="box1"><center>prueba1</center></div> 
              <div id="box2"><center>prueba2</center></div> 
              <div id="box3"><center>prueba3</center></div> 
              <div id="box4"><center>prueba4</center></div> 
         </div>

Insertar CODE, HTML o PHP: 
<style>
/*CSS*/
.contenedor {/*propiedades que quieras*/
    background-color:#0C0;
	width:auto; /*width:300px;*/
	height:auto;	
    display:flex;
    justify-content:space-around;
    flex-wrap:wrap;
}

#box1 {
	background-color:#0C0;
	position:absolute;
	top: 50px;
	left:50px;
	width:300px; /*width:300px;*/
	height:50px;
}

#box2 {
	background-color:#FC0;
	position:absolute;/* position:absolute;	*/
	top: 50px;
	right:50px;
	width:90px; /*width:90px;*/
	height:50px;
}

#box3 {
	background-color:#F30;
	position:absolute;
	bottom: 50px;
	right: 50px;
	width:300px;
	height:50px;
}

#box4 {
	background-color:#F9F;
	position:absolute;
	bottom: 50px;
	left: 50px;
	width:90px;
    height:50px;
}
	
</style>

en cuanto a las medidas query me parece ver en google que hay una gran variedad,yo pensaba que con esto se solucionaba:
HTML: 
<meta name="viewport" content="width=device-width; user-scalable=no; initial-scale=1; maximun-scale=1; minimun-scale=1">

Saludoss.

- - - Actualizado - - -




despues de postear acabo de ver esto Guía de Flexbox CSS3, creando estructuras flexibles facilmente. que creo que es lo que ando buscando siguiendo tu comentario.

Salud2.
Hacer clic para expandir...
 
eugeniocol dijo:
pues algo no entiendo o estoy haciendo mal tal cual pones los codigos se montan los div al estrechar la pantalla del navegador

HTML: 
<div class="contenedor">       
              <div id="box1"><center>prueba1</center></div> 
              <div id="box2"><center>prueba2</center></div> 
              <div id="box3"><center>prueba3</center></div> 
              <div id="box4"><center>prueba4</center></div> 
         </div>

Insertar CODE, HTML o PHP: 
<style>
/*CSS*/
.contenedor {/*propiedades que quieras*/
    background-color:#0C0;
	width:auto; /*width:300px;*/
	height:auto;	
    display:flex;
    justify-content:space-around;
    flex-wrap:wrap;
}

#box1 {
	background-color:#0C0;
	position:absolute;
	top: 50px;
	left:50px;
	width:300px; /*width:300px;*/
	height:50px;
}

#box2 {
	background-color:#FC0;
	position:absolute;/* position:absolute;	*/
	top: 50px;
	right:50px;
	width:90px; /*width:90px;*/
	height:50px;
}

#box3 {
	background-color:#F30;
	position:absolute;
	bottom: 50px;
	right: 50px;
	width:300px;
	height:50px;
}

#box4 {
	background-color:#F9F;
	position:absolute;
	bottom: 50px;
	left: 50px;
	width:90px;
    height:50px;
}
	
</style>

en cuanto a las medidas query me parece ver en google que hay una gran variedad,yo pensaba que con esto se solucionaba:
HTML: 
<meta name="viewport" content="width=device-width; user-scalable=no; initial-scale=1; maximun-scale=1; minimun-scale=1">

Saludoss.

- - - Actualizado - - -




despues de postear acabo de ver esto Guía de Flexbox CSS3, creando estructuras flexibles facilmente. que creo que es lo que ando buscando siguiendo tu comentario.

Salud2.
Hacer clic para expandir...

ok, voy hacer pruebas.
gracias.

Saludosss.
 
La etiqueta <meta viewport> es solo el inicio, un media query es como cualquier otra regla de css solo que se aplica únicamente bajo ciertos tamaños de pantalla.
En el ejemplo que te voy a poner he puesto dos media queries, sus ventajas son:

  • Pixel perfect: tu escoges los breakpoints, es decir, en que momento se van producir los cambios en la estructura.
  • Puedes agregar todos lo breakpoints que quieras, de acuerdo a la estructura de tu web.

y ojo que estoy usando un solo contenedor:

HTML: 
<!DOCTYPE html>
<html lang="en">
<head>
  <title></title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
  .contenedor{
    position: relative;
    min-height: 300px;
    border: 1px solid silver;
  }
  .box{
    position:absolute;
    height:50px;
  }
  #box1 {
    background-color:#0C0;
    top: 50px;
    left:50px;
    width:300px; 
  }
  #box2 {
    background-color:#FC0;
    top: 50px;
    right:50px;
    width:90px;
  }
  #box3 {
    background-color:#F30;
    bottom: 50px;
    right: 50px;
    width:300px;
  }
  #box4 {
    background-color:#F9F;
    bottom: 50px;
    left: 50px;
    width:90px;
  }	

  /*  
  EL VALOR DE max-width PUEDE SER CUALQUIER NÚMERO  
  DE ACUERDO A LA ESTRUCTURA DE TU WEB
  Y EN QUE MOMENTO QUIERES QUE SE EJECUTE EL "BREAKPOINT"
  */
  media only screen and (max-width: 510px) {
    #box2{
      top: 100px;
      right: auto;
      left: 50px;
    }
    #box3{
      right: auto;
      left: 50px;
    }
    #box4{
      bottom: 100px;
    }
  } 

  /*  
  ESTE ES OTRO "BREAKPOINT" PARA QUE LAS CAJAS MAS ANCHAS
  SE ACOMODEN A TODO LO ANCHO EN PANTALLAS MENORES A 418 PX
  */
  media only screen and (max-width: 418px) {
    #box1, #box3{ 
      width: calc(100% - 100px); 
      min-width: 90px;
    }
  }
  </style>
</head>
<body>
  <div class="contenedor">
    <div id="box1" class="box">1</div>
    <div id="box2" class="box">2</div>
    <div id="box3" class="box">3</div>
    <div id="box4" class="box">4</div>
  </div>
</body>
</html>

NOTA: cuando copies el código en tu editor de texto agrégale un arroba "@" antes de 'media only screen and', el editor del foro tiene un bug que convierte esa arroba en un código 😉
 
Última edición:
denzel dijo:
La etiqueta <meta viewport> es solo el inicio, un media query es como cualquier otra regla de css solo que se aplica únicamente bajo ciertos tamaños de pantalla.
En el ejemplo que te voy a poner he puesto dos media queries, sus ventajas son:

  • Pixel perfect: tu escoges los breakpoints, es decir, en que momento se van producir los cambios en la estructura.
  • Puedes agregar todos lo breakpoints que quieras, de acuerdo a la estructura de tu web.

y ojo que estoy usando un solo contenedor:

HTML: 
<!DOCTYPE html>
<html lang="en">
<head>
  <title></title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
  .contenedor{
    position: relative;
    min-height: 300px;
    border: 1px solid silver;
  }
  .box{
    position:absolute;
    height:50px;
  }
  #box1 {
    background-color:#0C0;
    top: 50px;
    left:50px;
    width:300px; 
  }
  #box2 {
    background-color:#FC0;
    top: 50px;
    right:50px;
    width:90px;
  }
  #box3 {
    background-color:#F30;
    bottom: 50px;
    right: 50px;
    width:300px;
  }
  #box4 {
    background-color:#F9F;
    bottom: 50px;
    left: 50px;
    width:90px;
  }	

  /*  
  EL VALOR DE max-width PUEDE SER CUALQUIER NÚMERO  
  DE ACUERDO A LA ESTRUCTURA DE TU WEB
  Y EN QUE MOMENTO QUIERES QUE SE EJECUTE EL "BREAKPOINT"
  */
  media only screen and (max-width: 510px) {
    #box2{
      top: 100px;
      right: auto;
      left: 50px;
    }
    #box3{
      right: auto;
      left: 50px;
    }
    #box4{
      bottom: 100px;
    }
  } 

  /*  
  ESTE ES OTRO "BREAKPOINT" PARA QUE LAS CAJAS MAS ANCHAS
  SE ACOMODEN A TODO LO ANCHO EN PANTALLAS MENORES A 418 PX
  */
  media only screen and (max-width: 418px) {
    #box1, #box3{ 
      width: calc(100% - 100px); 
      min-width: 90px;
    }
  }
  </style>
</head>
<body>
  <div class="contenedor">
    <div id="box1" class="box">1</div>
    <div id="box2" class="box">2</div>
    <div id="box3" class="box">3</div>
    <div id="box4" class="box">4</div>
  </div>
</body>
</html>

NOTA: cuando copies el código en tu editor de texto agrégale un arroba "@" antes de 'media only screen and', el editor del foro tiene un bug que convierte esa arroba en un código 😉
Hacer clic para expandir...

ok. lo probarea, ahora voy a poner un nuevo post estoy probando varios temas a ver por cual me decido des pues de superar mis grandes dudas.

Saludoss.
 
Hay que estar conectado o registrado para responder aquí.

Temas similares

WebmasterKing
¿Cómo hacer esta linea Horizontal?
Respuestas
6
Visitas
348
WebmasterKing
WebmasterKing
satanson
Cómo hacer que el fondo de los post cubra todo el contenido en Bootstrap
Respuestas
4
Visitas
515
samuelsuteras
samuelsuteras
zarakatajamember
Cómo hacer una tabla responsive para dispositivos móviles con CSS
Respuestas
8
Visitas
979
Baires23
Baires23
P
¿Cómo hacer que los div 'semana' aparezcan uno al lado del otro en una estructura de div grid?
Respuestas
2
Visitas
541
pedrinalex
P
CANIBAL
Tutorial: Cómo hacer publicidad en responsive con CSS y HTML
Respuestas
7
Visitas
1K
Mr. Robot
M
Atrás
Arriba