2016-09-08 3 views
0

Я использую bootstrap, и у меня есть img в div, img выровнен по высоте, я не мог сделать палку на дне div.Bootstrap принести img в нижнюю часть div

<div class="col-lg-6 col-md-6" style="height: 100%"> 
    <img src="images/tv/Smartphone_Hand.png" class="img-responsive" style="vertical-align: bottom; position: absolute;">  
</div> 
+1

добавить «нижний: 0» к стилю изображения и убедиться, что div является «position: relative» – Pete

+0

'position: absolute; bottom: 0' должен делать трюк, предполагая, что 100% высота вашего div работает. –

+0

@ Поймите img dissapear !!! –

ответ

1
<div class="col-lg-6 col-md-6" style="height: 100%"> 
    <img src="images/tv/Smartphone_Hand.png" class="img-responsive" style="position:absolute;bottom:0">  
</div> 

Используйте его

+1

Спасибо, это работает –

0

Я вижу, что вы пытаетесь использовать vertical-align:bottom. От MDN:

CSS-свойство вертикального выравнивания определяет вертикальное выравнивание в инлайн или поле таблицы элементов.

Потому что ваш дисплей, скорее всего, начальный (блок), он не будет работать. Вы можете расположить его как абсолют, который вы сделали, и положить его на дне:

img { 
 
     position:absolute; 
 
     bottom:0; 
 
    }
<img src="https://s-media-cache-ak0.pinimg.com/236x/d1/f9/eb/d1f9eb025650eb3ff13a26697ed9994a.jpg" alt="test" />

Кроме того, следует избегать использования встроенного стайлинга как можно больше. Это делает дизайн намного сложнее, поскольку проект разворачивается.

Смежные вопросы