Alinear imagen en la parte inferior de un div flotante izquierdo

Intentando crear una interfaz WEB para mi colección local de cómics. El look'n'feel debería ser muy similar al iBooks de Apple: el libro cubre las sesiones en las estanterías. Las cubiertas son similares pero no idénticas en altura y ancho. No se puede averiguar cómo insertar las portadas de la imagen en la parte inferior del div sin indicar el ancho del div que lo contiene. Ir con absoluto dentro de la familia simplemente amontona las coberturas en una pila.Alinear imagen en la parte inferior de un div flotante izquierdo

HTML:

<div class="cover"><a href="#"><img src="cover1.jpg"></a></div> 
<div class="cover"><a href="#"><img src="cover2.jpg"></a></div> 
<div class="cover"><a href="#"><img src="cover3.jpg"></a></div>

CSS:

body {background-image: url(http://image.bayimg.com/oaddpaaea.jpg); background-repeat: repeat;} 
.cover {float: left; height: 258px; border: 1px solid red; margin: 0px 5px 25px 5px;} 
.cover img {border: 1px solid green; -webkit-box-shadow: 0 8px 6px -6px black; -moz-box-shadow: 0 8px 6px -6px black; box-shadow: 0 8px 6px -6px black;}

jsFiddle Ejemplo: http://jsfiddle.net/NATqD/

Fuente

2012-09-25 Shurik76

¡Hola, 1695953! Pregunta interesante (+1), aunque el jsfiddle probablemente no muestre lo que quiere mostrar – Cedric

. De esto es de lo que está hablando: http://jsfiddle.net/userdude/NATqD/2/ –

Pruebe este CSS:

.cover { float: left; height: 258px;line-height: 258px; border: 1px solid red; margin: 0px 5px 25px 5px;} 
.cover img {vertical-align: bottom; border: 1px solid green; -webkit-box-shadow: 0 8px 6px -6px black; -moz-box-shadow: 0 8px 6px -6px black; box-shadow: 0 8px 6px -6px black;}

Se agrega line-height: 258px para que coincida con la altura de la div cubierta. Luego vertical-align: bottom en las imágenes. Ejemplo de trabajo:

http://jsfiddle.net/NATqD/6/

Fuente

2012-09-25 02:07:29 Fredy

¡Gracias! ¡Eso es exactamente lo que tenía en mente! – Shurik76

Oh bien. Bueno, sí, esa fue una buena idea ... –

@ user1695953: De nada :) – Fredy

Añadir la posición: relativa a la .Cubrir esto le permite añadir la posición: absoluta la imagen y por lo tanto puede colocar las imágenes absolutamente relativas a la div.

http://jsfiddle.net/NATqD/1/

Fuente

2012-09-25 01:58:05 rsoneill21

En su pregunta, dijo que no quería especificar un ancho en el contenedor. Tu respuesta incluye una. – mrtsherman

Eso es correcto. No quiero codificar el ancho ni configurarlo en tiempo de ejecución. La idea es dejar que el div cubra la imagen de portada que lo contiene. – Shurik76

¿por qué no quieres usar el ancho? ¿Es porque las imágenes de portada son de diferentes tamaños? – rsoneill21

Este parece ser el más directo a mí:

<div class="cover"> 
    <a href="#"><img src="http://www.emeraldinsight.com/fig/53_10_1108_S0731-9053_2009_0000024005.png"></a> 
    <a href="#"><img src="http://roborfid.dyndns.org/data/book_images/backs_small/SIWE_R_GM00404130.jpg"></a> 
    <a href="#"><img src="http://roborfid.dyndns.org/data/book_images/backs_small/SIWE_R_GM00624371.jpg"></a> 
    <a href="#"><img src="http://www.lauren-myers.com/_img/right_arrow.jpg"></a> 
    <a href="#"><img src="http://www.gotohoroscope.com/img/bg_00.gif"></a> 
    <a href="#"><img src="http://roborfid.dyndns.org/data/book_images/backs_small/SIWE_R_GM00404091.jpg"></a> 
    <a href="#"><img src="http://www.startplay.co.uk/images/play.png"></a> 
    <a href="#"><img src="https://www.educorporatebridge.com/old_back_up_16-07-12/images/foundcourses.png"></a> 
    <a href="#"><img src="http://s1.hao123.com/index/images/temple_bg.gif"></a> 
</div> 

.cover { 
    line-height: 258px; 
    height: 258px; 
    border: 1px solid red; 
    margin: 0px 5px 25px 5px; 
}

http://jsfiddle.net/NATqD/5/

funciona en Firefox y Chrome.

Fuente

2012-09-25 02:09:40

Tan pronto como cambie el ancho/alto de la ventana gráfica (tamaño de la ventana del navegador), saca todas las imágenes fuera del div que contiene, en lugar de volver a adaptar las cubiertas a los estantes. – Shurik76

Puede manipular 'font-size' y' line-height' para encontrar la combinación correcta. Esto parece hacer que se ajuste exactamente, aunque me imagino que tienes un estante debajo de los libros para compensar: http://jsfiddle.net/NATqD/9/ –

Entendido. ¡Gracias! http://jsfiddle.net/FTrGs/ – Shurik76

Alinear imagen en la parte inferior de un div flotante izquierdo

Respuesta

Cuestiones relacionadas