2

Me gustaría que me ayudaran a colocar 9 posiciones básicas dentro de un div dentro de un div como aparece en el ejemplo. Las 9 posiciones serían: Superior Derecho, Superior Izquierdo, Superior Centro. Centro Derecho, Centro Izquierdo, Centro Derecho. Inferior Derecho, Inferior Izquierdo, Inferior Derecho. Como los divs son de distinto tamaño y muchas veces sin especificar (algunos serán texto) supongo que tendría que ir en porcentajes. El div padre tampoco tendrá un ancho especificado pues también obedecerá a la composición de un texto. Gracias.

body{ margin:0; padding:0;}
#header{width:100%; border-bottom:red 1px solid; position:fixed; height:30px;z-index:1000;  margin-top:0;}
#wraper{width:100%;  padding-top:30px;}
.basic_unit{width:800px; height:1200px; border:rgba(0,0,0,1.00) solid 1px; margin:auto;}
.basic{width:200px; height:200px; background:yellow;}
.fixed {position:fixed;}
.top_left{ top:30; right-margin:0%;}
.top_right{ top:30px; right:0%;}
#container{overflow:hidden;display:inline-block; margin:auto;}
#wraper{text-align:center;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wraper">
<div id="container">
<div class="basic fixed top_left"></div>
<div class="basic fixed top_right"></div>
<div class="basic_unit">
</div>
<div class="basic_unit">
</div>
</div>
</div>

1
  • El alto de los divs es variables? Si ese es el caso deberias usar una librería como masonry ya que ajustar anchos variables y alturas variables puede ser un poquito complicado. Si las alturas son iguales se puede lograr solo con CSS.
    – devconcept
    Commented el 17 mar. 2016 a las 12:19

1 respuesta 1

2

Aquí dejo un ejemplo de cómo se podría lograr sin porcentajes. Esta solución se basa en:

  • Hacer que el div interior ocupe el tamaño completo del div exterior
  • Añadir posición relativa (position:relative) al div interior
  • La clase basic identificará las 9 posiciones y tendrá posición absoluta (position:absolute). De este modo siempre se ajustará dentro del div padre.
  • Definir las 6 posiciones básicas:
    • Arriba/top: que tendrá top:0.
    • Abajo/bottom: que tendrá bottom:0.
    • Centro/center: que tendrá top:50% y una traslación de -50% horizontalmente.
    • Izquierda/left: que tendrá left:0.
    • Derecha/right: que tendrá right:0.
    • Centro/middle: que tendrá left:50% y una traslación de -50% verticalmente.
  • En el caso de que la clase se Centro-Centro (center middle), se redefine la traslación para que sea -50% horizontal y verticalmente.

Ahora sólo queda añadir los 9 div para las 9 posiciones, combinando las diferentes clases verticales y horizontales y dejando que el navegador se encargue de renderizarlas en su lugar adecuado.

He cambiado un poco los estilos para que esté un poco más limpio. El resultado se vería así:

body{ margin:0; padding:0;}
#header{width:100%; border-bottom:red 1px solid; position:fixed; height:30px;z-index:1000;  margin-top:0;}
#wraper{width:100%;  padding-top:30px; text-align:center; }
.basic_unit{width:800px; height:1200px; border:rgba(0,0,0,1.00) solid 1px; margin:auto;}
.basic{width:200px; height:200px; background:yellow;}
.basic2{width:200px; height:200px; background:red;}
.fixed {position:fixed;}
.center_center{ display:inline-block;z-index:100;}
#container{overflow:auto; background:rgba(255,0,234,0.20); display:inline-block;}
.left { left:0; }
.right { right:0; }
.center { left:50%; transform:translate(-50%, 0); }
.top { top:0; }
.bottom { bottom:0; }
.middle { top:50%; transform:translate(0, -50%); }
.center.middle { transform:translate(-50%, -50%); }
<div id="header">
</div>

<div id="wraper">
<div id="container">

<div class="basic fixed top left"></div>
<div class="basic fixed top right"></div>
<div class="basic fixed top center"></div>
<div class="basic fixed middle left"></div>
<div class="basic fixed middle right"></div>
<div class="basic fixed middle center"></div>
<div class="basic fixed bottom left"></div>
<div class="basic fixed bottom right"></div>
<div class="basic fixed bottom center"></div>

<div class="basic_unit">
</div>
<div class="basic_unit">
</div>
<div class="basic_unit">
</div>
<div class="basic_unit">
</div>
  </div>
  </div>

3
  • Hola, gracias por la respuesta pero los divs deben tener posición fija con respecto a la pantalla y no salirse del ancho del div padre por lo que no se resuelve el problema que precisamente deriva de estos condicionantes.
    – Ivan Soler
    Commented el 17 mar. 2016 a las 10:37
  • @IvanSoler He cambiado el código un poco: la posición fija con respecto a la pantalla se consigue al ponerle posición fija al div exterior, y el ancho de los .basic no excede el del padre
    – Alvaro Montoro
    Commented el 17 mar. 2016 a las 11:51
  • Nada @AlvaroMontoro me resulta imposible compatibilizar lo que propones con mi estructura ya que al "container" le das ancho y altura fija y al wraper también pero en mi caso estas características dependen del contenido de éstos. La complicación del asunto en realidad es esta sumada a la premisa de que los divs que busco posicionar no se salgan del ancho del div container pese a estar fijos con respecto a la pantalla.
    – Ivan Soler
    Commented el 17 mar. 2016 a las 12:06

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.