Выровнять img в нижней части относительных divs

Question

У меня есть стол с фиксированной высотой (500 пикселей), но относительная ширина (100% экрана). Таблица служит в качестве таблицы сравнения размеров, с сеткой для фонового изображения с единицами измерения вдоль левого края.

Таблица состоит из трех ячеек: пустой для хранения пустого места для легенды вдоль левого края, средней ячейки, которая отображает элемент страницы и правую ячейку, заполненную изображением другого предмета, пользователя хочет сравнить размеры с.

Я могу отобразить это относительно хорошо, но предостережение заключается в том, что изображения выравниваются по верхнему краю таблицы, а не по нижним краям.

Любая попытка, которую я делаю при изменении настроек положения и отображения, приводит к тому, что изображения исчезают из вида.

HTML:

<div id="scalechart"> 
     <div id="buffer"></div> 
     <div id="nochoice"><img src="http://www.example.com/image1.png" class="leader"></div> 
     <div id="firstchoice"><img src="http://www.example.com/image2.png" class="leader"></div> 
</div> 

CSS:

scalechart { 
    text-align: right; 
    position: relative; 
    z-index: 1; 
    display: block; 
    width: 100%; 
    border: 2px solid grey; 
    height: 500px; 
    clear: both; 
    background: url(../../legend.png) no-repeat, url(../../Gridlines.png) repeat-x; 
    background-size: contain; 
} 

#buffer { 
    width: 144px; 
    position: relative; 
    display: inline-block; 
    height: 100%; 
    float: left; 
} 

#nochoice, #firstchoice { 
    position: relative; 
    display: inline-block; 
    float: left; 
} 

Я попытался сделать позиции абсолютного и установив нижнюю и оставили 0, но изображения просто исчезают. Любая помощь приветствуется.

Answer 1

Вы говорите о таблице, но используете float, почему бы не отобразить: table/table-cell?

Я удалил какой-то css, который мне показался бесполезным для демонстрации.

#scalechart { 
 
    text-align: right; 
 
    display: table; 
 
    width: 100%; 
 
    border: 2px solid grey; 
 
    height: 500px; 
 
    background: url(../../legend.png) no-repeat, url(../../Gridlines.png) repeat-x; 
 
    background-size: contain; 
 
} 
 
#buffer { 
 
    width: 144px; 
 
    display: table-cell; 
 
} 
 
#nochoice, 
 
#firstchoice { 
 
    display: table-cell; 
 
    vertical-align: bottom; 
 
}

<div id="scalechart"> 
 
    <div id="buffer"></div> 
 
    <div id="nochoice"> 
 
    <img src="http://www.example.com/image1.png" class="leader"> 
 
    </div> 
 
    <div id="firstchoice"> 
 
    <img src="http://www.example.com/image2.png" class="leader"> 
 
    </div> 
 
</div>