Вертикально выравнивание изображения в нижней части div, которое содержит список

Question

У меня есть div, в котором есть некоторый контент в нем, список элементов.

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

Вот что я сделал до сих пор:

CSS:

div.greybox{ 
    border:solid 8pt; 
    border-color:rgb(169,172,176); 
    display:inline-block; 
    border-radius:10px; 
    width:290px; 
    height:306px; 
    padding:10px; 
    vertical-align:top; 
} 

div.greybox:before { 
    content: ' '; 
    display: inline-block; 
    vertical-align: bottom; /* vertical alignment of the inline element */ 
    height: 100%; 
} 

div.greybox span{ 

    display: inline-block; 

    vertical-align: bottom; 

} 

/*this is just for the image, I dont care much about this*/ 
img{ 
    width:247px; height:76px; 
} 

HTML:

<div class="greybox col-md-offset-0"> 
    <ul> 
     <li> 
      an absence of medium or high risk criteria 
     </li> 
    </ul> 
    <span><img src="http://www.nacacnet.org/studentinfo/PublishingImages/fish.jpg" /></span> 
</div> 

https://jsfiddle.net/b5ps3xcc/

Вот как я хочу, чтобы это выглядело:

Answer 1

Насколько я знаю, vertical-align может быть использован только для управления положением инлайн-элементов в строке текст, в котором они находятся (за исключением случаев, когда они используются со столами, но это совсем другая история).

Но не бойся, извините, на помощь!

Примените это к div:

display: flex; 
flex-direction: column; 

И это в ul:

flex: 1; 

• display: flex; превратит div в Flexbox, что позиции его содержимое равномерно распределяется по доступному пространству ,
• flex-direction: column; сделает это так вертикально.
• flex: 1; на ul заставит этот элемент расти, если он оставлен над пространством.

Ниже приведены эти атрибуты, реализованные в вашей скрипке, с префиксами поставщиков.

div.greybox{ 
 
    border:solid 8pt; 
 
    border-color:rgb(169,172,176); 
 
    border-radius:10px; 
 
    width:290px; 
 
    height:306px; 
 
    padding:10px; 
 
    
 
    display: -webkit-flex; 
 
    display: -moz-flex; 
 
    display: -ms-flex; 
 
    display: flex; 
 
    -webkit-flex-direction: column; 
 
    -moz-flex-direction: column; 
 
    -ms-flex-direction: column; 
 
    flex-direction: column; 
 
} 
 

 
div.greybox ul{ 
 
    -webkit-flex: 1; 
 
    -moz-flex: 1; 
 
    -ms-flex: 1; 
 
    flex: 1; 
 
} 
 

 
/*this is just for the image, I dont care much about this*/ 
 
img{ 
 
    width:247px; height:76px; 
 
}

<div class="greybox col-md-offset-0"> 
 
    <ul> 
 
     <li> 
 
      an absence of medium or high risk criteria 
 
     </li> 
 
    </ul> 
 
    <span><img src="http://www.nacacnet.org/studentinfo/PublishingImages/fish.jpg" /></span> 
 
</div>

Обратите внимание, что это функция HTML5, поэтому старые браузеры, скорее всего, не поддерживает, в частности, IE имеет очень слабую поддержку. Подробную информацию о совместимости см. В разделе caniuse.com.

В качестве крайней меры для поддержки старых браузеров (и для полноты этого ответа) вы можете использовать таблицы, чтобы достичь того, чего вы хотите, предоставив самой таблице и ячейкам в последней строке явный высота и разрешение высоты ячеек в верхнем ряду (строках) вычисляются неявно.
Но это evil and wrong, поэтому не делайте этого, если вам не нужно.

Answer 2

Использование Абсолютного позиционирования промежутка, содержащее изображение:

div.greybox { 
 
    border: solid 8pt; 
 
    border-color: rgb(169, 172, 176); 
 
    display: inline-block; 
 
    border-radius: 10px; 
 
    width: 290px; 
 
    height: 306px; 
 
    padding: 10px; 
 
    vertical-align: top; 
 
    position: relative; 
 
} 
 

 
div.greybox span { 
 
    position: absolute; 
 
    bottom: 10%; 
 
    left: 50%; 
 
    transform: translateX(-50%); 
 
} 
 

 
/*this is just for the image, I dont care much about this*/ 
 
img { 
 
    width: 247px; 
 
    height: 76px; 
 
}

<div class="greybox col-md-offset-0"> 
 
    <ul> 
 
    <li> 
 
     an absence of medium or high risk criteria 
 
    </li> 
 
    </ul> 
 
    <span><img src="http://www.nacacnet.org/studentinfo/PublishingImages/fish.jpg" /></span> 
 
</div>

Answer 3

для старого браузера, вы можете использовать свойство таблицы макета: примера: https://jsfiddle.net/b5ps3xcc/2/

div.greybox { 
 
    border: solid 8pt; 
 
    border-color: rgb(169, 172, 176); 
 
    display: table; 
 
    border-radius: 10px; 
 
    width: 290px; 
 
    height: 306px; 
 
    padding: 10px; 
 
} 
 
div.greybox ul { 
 
    display: table-row; 
 
    height: 100%; 
 
    /* will take as much space that is avalaible pushing other content down; */ 
 
} 
 
/*this is just for the image, I dont care much about this*/ 
 

 
img { 
 
    width: 247px; 
 
    height: 76px; 
 
} 
 
li + li { 
 
    color: #CA3100; 
 
}

<div class="greybox col-md-offset-0"> 
 
    <ul> 
 
    <li> 
 
     an absence of medium or high risk criteria 
 
    </li> 
 
    <li><b>See it as an alternative to flex, but greybox will grow taller if content goes tallervthan initial height...</b> 
 
    </li> 
 
    </ul> 
 
    <span><img src="http://www.nacacnet.org/studentinfo/PublishingImages/fish.jpg" /></span> 
 
</div>

Answer 4

Этот эксп. код работает хорошо для меня.

<style> 
.listing_container{width:300px; height:300px;font: 0/0 a;} 
.listing_container:before { content: ' ';display: inline-block;vertical-align: bottom;height: 100%;} 
.listing_container img{ display: inline-block; vertical-align: bottom;font: 16px/1 Arial sans-serif; max-height:100%; max-width:100%;} 
<style> 

<div class="listing_container"> 
    <img src="http://www.advancewebsites.com/img/theme1/logo.png"> 
</div>