1

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

0

3 respuestas 3

2

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

1
  • Si ya lo resolví gracias por la explicación ya que no conocía ese método. Commented el 26 mar. 2019 a las 7:12
2

Aquí tengo una respuesta (Que modifica un poco tu código css) para que funcióne:

.contenedor {
  -webkit-clip-path: polygon(0 0, 100% 17%, 100% 83%, 0% 100%);
  clip-path: polygon(0 0, 100% 17%, 100% 83%, 0% 100%);
  background-color: black;
  min-height: 180px;
  padding: 100px 30px;
}

.contenido {
  /*Cosas nuevas agregadas.*/
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: row wrap;
  /*Fin cosas nuevas agregadas*/
  background-color: #fff;
  color: #000;
  height: 180px;
  padding: 50px;
}

#inner {

    display: inline-block; // Otra cosa que se agrego
    width: calc(50% - 40px); //Aquí te falto calcular el 50% sin el padding
    background: black;
    border-radius: 5px;
    padding: 40px;
    }



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

Voy a expicar entonces un poco lo que ha cambiado...

Como veras puse:

display: flex;
justify-content: center;/*Este*/
align-items: center;/*Este*/
flex-grow: 1;/*Este*/
flex-flow: row wrap;/*Y este otro solo se pueden usar con display: flex*/

display flex, es un css comúnmente llamado o reconocido como: "Flexbox", este se usa en el llamado "pocisionamiento de cajas" en css, y es muy usado cuando requieres hacer una pagina responsive design (Es decir adaptable a dispositivos moviles).

En nuestro caso para poder identificar donde debemos poner el:

display: flex;

y los demás atributos, basta con saber cual es el contenedor "padre", de los elementos "hijos", a los que les queremos ya sea "centrar", verticalmente, horizontalmente u ambas o si los queremos poner uno al lado del otro, esto ya dependerá del usuario.

En nuestro caso, el contenedor padre de nuestros elementos hijos ¿Cuál sería?, muy sencillo, es .contenido, que es el contenedor mas cercano jerargicamente a sus hijos.

Entonces a este ya sabemos que le deberemos poner:

display: flex;

y sus otros atributos...

Hay muchas maneras diferentes de centrado y alineación con flexbox, para ver algunas de estas posiciones y formas de distribuir elementos, te recomiendo consultar el siguiente enlace:

Flexbox

Bien, siguiendo con la explicación, sin mas, como habrás notado (Si visitaste el link de flexbox), te habrás dado cuenta que:

justify-content: center;

lo que hace es alinear todo el contenido hacia el centro horizontalmente, este no deja espacios, por lo que si quieres ponerle espacios entre cada elemento, deberás usar otra distribución de justify-content: center; o bien, simplemente añadirle un margin a todos los elementos que tengan el id #inner, excepto al ultimo.

align-items: center;

Este de aquí hace lo mismo que el anterior, pero la diferencia es que alinea verticalmente y no horizontalmente, el resultado de combinar ambos es que estarán alineados todos los elementos hijos tanto horizontal como verticalmente.

flex-flow: row wrap;

flex-flow, es la abreviación de en realidad dos atributos que se pueden definir aparte, es como "la combinación de estos", separados, estos dos son:

flex-direction: row;
flex-wrap: wrap;

uniendolos quedaria:

flex-flow: row wrap;

El primer parámetro "row", define de que modo se distribuyen los objetos en ese contenedor y también por tanto de que forma se alinean, en este caso "row", es fila en ingles, por lo que su distribuición sera en fila, y wrap, define si el elemento no cabe en el contenedor padre, este lo que hará es desplazar los demás divs hacia abajo.

Por supuesto row y wrap no son los unicos valores que se pueden tomar, hay muchos, entre estos estan: row wrap, row no-wrap, row reverse, etc.

Por ultimo:

a inner, es necesario añadirle:

display: inline-block;

Ya que según lo que llevo trabajando con flex-box, he aprendido que si quieres alinear bien tu contenido debes usar inline-block, ya que inline, inutiliza a flexbox, inline-block le permite hacer a flex-box lo que necesitas que haga, y block el problema consiste en que el tamaño del div será igual al de su contenedor padre, por lo tanto al no haber espació, siempre se alinearan uno abajo del otro (Y esto no es lo que quieres).

Que por cierto vi que tu div como predeterminado tenia display: block, por esta razón fue necesario añadir esa linea, si tus contenedores hubieran tenido como predeterminado display: inline-block, hubieramos podido saltarnos poner: display: inline-block en #inner.

     flex-grow: 1;

Flex grow determina si un elemento puede abarcar todo el ancho de un elemento o no, es decir "si puede crecer", colocar 0 significa que no puede heredar este comportamiento, colocar 1 significa que puede hacerlo.

intenta colocando flex-grow: 1, en .contenido

¡Espero mi respuesta te halla ayudado!, ¡exitos!

Posdata: como dice alguien que ya respondio la pregunta: Si, es cierto que es mejor ponerle una clase a #inner, y utilizar la clase en vez del id en CSS, ya que como el dice, estas usando css en varios elementos, no solo uno, y el id, se supone que deberia ser unico para cada elemento!, para eso existen las clases :)

5
  • Gracias por el aporte @alfap, tienes razón!
    – Layer
    Commented el 26 mar. 2019 a las 6:24
  • Gracias por tu respuesta y usando display :inline se resuelve lo de poner un div al lado del otro . Pero no hay cambio al cambiar el tamaño de pantalla . igual actualice la pregunta . para ser mas específico Commented el 26 mar. 2019 a las 6:39
  • Gracias buena explicación. Saludos cordiales Commented el 26 mar. 2019 a las 7:11
  • Creo que editaste tu pregunta y codigo, veo que ahora buscas lo opuesto a la pregunta anterior pero ahora cuando la pantalla es muy pequeña no es asi??... en tal caso. voy a editar parte de la respuesta que ya habia dado, creo que me falto agregar un pequeño detalle para que funcione lo que dices...
    – Layer
    Commented el 26 mar. 2019 a las 10:28
  • 1
    Mira de nuevo el codigo porfavor, se han hecho modificaciones (en el media query) y en la clase .contenedor, mira si te sirve haciendolo asi, por cierto, quita justify-content: center; del id inner, este debe estar en .content, ademas inner no deberias de usarlo como id en el css y mas bien colocarle una clase llamada de la misma manera en el html y seleccionarla en css.
    – Layer
    Commented el 26 mar. 2019 a las 10:40
1

Lo mas sencillo que se me ocurre, sin usar media querys ni grid. Cuando el viewport sea menor de 400px (un poco más en realidad, por los margenes y demas) las dos cajas se pondran una bajo otra al 100% de ancho. Ojo, no se usan IDs para asignar clases, es mala practica, y mucho menos repetirlos.

.contenido{
width:100%;
display:flex;
flex-wrap:wrap;
}
.inner{
margin:5px;
flex:1;
min-width:200px;
background:#ddd;
padding:20px;
}
<div class="contenido">
    <div class="inner">div 1</div>
    <div class="inner">div 2</div>
</div>

1
  • Si es una manera muy fasil de lograrlo igual el id contenido se le debería dar max-width 900px; . Commented el 26 mar. 2019 a las 15:27

Tu Respuesta

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

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