Colocando un div cerca del lado inferior de otro div

102

Tengo div exterior e interior div. Necesito colocar el div interno en la parte inferior del externo.

El div exterior es elástico (ancho: 70% por ejemplo). También necesito centrar el bloque interior.

El modelo simple del maquillaje descrito se muestra en la siguiente imagen:

ingrese la descripción de la imagen aquí

html css layout romano
fuente

¿La altura también es elástica? De lo contrario, puede establecer el margen superior del cuadro interior en (outsideBoxHeight - innerBoxHeight).

peirix

@peirix: sí, la altura del bloque exterior puede cambiar y no lo sabemos

Roman

79

Probado y funcionando en Firefox 3, Chrome 1 e IE 6, 7 y 8:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
                      "http://www.w3.org/TR/html4/strict.dtd">
<html><body>
<div style='background-color: yellow; width: 70%;
            height: 100px; position: relative;'>
    Outer
    <div style='background-color: green;
                position: absolute; left: 0; width: 100%; bottom: 0;'>
        <div style='background-color: magenta; width: 100px;
                    height: 30px; margin: 0 auto; text-align: center'>
            Inner
        </div>
    </div>
</div>
</body>
</html>

Versión en vivo aquí: http://jsfiddle.net/RichieHindle/CresX/

RichieHindle
fuente

Gracias, tu solución es casi correcta. Solo tuve que agregar "// margin-left: -40px" al estilo del bloque verde para IE. Sin este truco con el atributo margin-left, su bloque verde se eliminó en IE7. ¿Alguien puede explicar de dónde viene este 40px?

Roman

IE7 estaba colocando horizontalmente el div verde después de la palabra "Outer". Actualicé el código para especificar "left: 0".

RichieHindle

13

Necesita un div de envoltura para el inferior, para poder centrarlo.

<style>
   /* making it look like your nice illustration */
   #outer { width: 300px; height: 200px; background: #f2f2cc; border: 1px solid #c0c0c0; }
   #inner { width: 50px; height: 40px; background: #ff0080; border: 1px solid #800000; }

   /* positioning the boxes correctly */
   #outer { position: relative; }
   #wrapper { position: absolute; bottom: 3px; width: 100%; }
   #inner { margin: 0 auto; }
</style>


<div id="outer">
   <div id="wrapper"><div id="inner"></div></div>
</div>

Magnar
fuente

7

CSS3 Flexboxpermite el posicionamiento inferior muy fácilmente. Consulte la tabla de soporte de Flexbox

HTML

<div class="outer">
  <div class="inner">
  </div>
</div>

CSS

.outer {
  display: flex;
  justify-content: center; /* Center content inside */
}
.inner {
  align-self: flex-end; /* At the bottom of the parent */
}

Salida:

Mostrar fragmento de código

.outer {
  background: #F2F2CD;
  display: flex;
  width: 70%;
  height: 200px;
  border: 2px solid #C2C2C3;
  justify-content: center;
}
.inner {
  background: #FF0081;
  width: 75px;
  height: 50px;
  border: 2px solid #810000;
  align-self: flex-end;
}

<div class="outer">
  <div class="inner">
  </div>
</div>

Expandir fragmento

m4n0
fuente

5

Funciona bien en todos los navegadores, incluido ie6.

<style>
    #outer{
        width: 70%;
        background-color: #F2F2CC;
        border: 1px solid #C0C0C0;
        height: 500px;
        position: relative;
        text-align: center;
    }

    #inner{
        background-color: #FF0080;
        border: 1px solid black;
        width: 30px;
        height: 20px;

        /* Position at the bottom */
        position: relative;
        top: 95%;

        /* Center */
        margin: 0 auto;
        text-align: left;
    }
</style>

<div id="outer">
    <div id="inner">
    </div>
</div>

Dmitri Farkov
fuente

el 95% superior no es lo mismo que decir 10 píxeles inferiores. Quieres que el cuadro interior se ancle en la parte inferior a medida que se cambia el tamaño de la pantalla.

user959690

Colocando un div cerca del lado inferior de otro div

Respuestas: