Wyrównanie dolne obrazu HTML wewnątrz kontenera DIV

Question

Mam znacznik DIV o stałej wysokości. Większość obrazów ma taką samą wysokość i szerokość.

Chcę wyrównać obrazy na dole elementu div, aby były ładnie rozmieszczone. Oto co mam do tej pory:

<div id="randomContainer"> 
    <div id="imageContainer"> 
     <img src="1.png" alt=""/> 
     <img src="2.png" alt=""/> 
     <img src="3.png" alt=""/> 
     <img src="4.png" alt=""/> 
    </div> 
    <div id="navigationContainer"> 
     <!-- navigation stuff --> 
    </div> 
</div> 

CSS wygląda następująco:

div#imageContainer { 
    height: 160px; 
    vertical-align: bottom; 
    display: table-cell; 
} 

zdołałem wyrównać obrazy na dole z display: table-cell i vertical-align: bottom atrybutów CSS.

Czy jest bardziej przejrzysty sposób wyświetlania div jako komórki tabeli i wyrównania obrazów u dołu znacznika DIV?

Answer 1

To jest Twój kod: http://jsfiddle.net/WSFnX/

Korzystanie display: table-cell jest w porządku, pod warunkiem, że masz świadomość, że to nie będzie działać w IE6/7. Poza tym, jest to bezpieczne: Is there a disadvantage of using `display:table-cell`on divs?

Aby rozwiązać przestrzeń na dnie, dodać vertical-align: bottom do rzeczywistych img s:

http://jsfiddle.net/WSFnX/1/

Usuwanie przestrzeń pomiędzy obrazami sprowadza się do tego: bikeshedding CSS3 property alternative?

Więc oto demo z białymi znakami usunięte w HTML: http://jsfiddle.net/WSFnX/4/

Answer 2

Ustaw rodzica Div jak position:relative i wewnętrzny element position:absolute; bottom:0

Answer 3

Flexboxes Można to osiągnąć za pomocą align-items: flex-end; flex-direction: column; z display: flex; lub display: inline-flex;

div#imageContainer { 
    height: 160px; 
    align-items: flex-end; 
    display: flex; 
    flex-direction: column; 
} 

CSS-Tricks has a good guide for flexboxes

Answer 4

< dz> z pewnych proporcjach

div { 
    position relative 
    width: 100%; 
    height: 100%; 
} 

< img> „s ze swoich proporcjach

img { 
    position: absolute; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    width: auto; /* to keep proportions */ 
    height: auto; /* to keep proportions */ 
    max-width: 100%; /* not to stand out from div */ 
    max-height: 100%; /* not to stand out from div */ 
    margin: auto auto 0; /* position to bottom and center */ 
}