html - 我无法在 Bootstrap DIV 的底部获取图像

Question

我无法将图像放到 DIV 的底部(这可能是导致问题的 boostrap DIV)

<section id="page-portfolio">
    <div class="portfolio-item" id="item-1">
         <div class="col-sm-12 col-md-10">
             <img src="img/mac-devices-small.png" class="img-responsive"/>
         </div>
    </div>

    <div class="portfolio-item" id="item-2">
         <div class="col-sm-12 col-md-10">
             <img src="img/mac-devices-small.png" class="img-responsive"/>
         </div>
    </div>
</section>

CSS:

#page-portfolio {
  height: 1300px;
}

.portfolio-item {
   height: 45%;
   width: 100%;
}

#item-1 {
   background-image: url("../img/client-fb.jpg");
   background-size: cover;
   background-position: top;
   position: relative;
}

#item-1 img {
   position: absolute;
   bottom: 0;
}

有什么解决方法吗？

Answer 1

您的 div 元素的 id 为“item-2”，但您的选择器的目标是 #item-1。将您的 CSS 选择器更改为:

#item-1, #item-2 { ... }
#item-1 img, #item-2 img { ... }

或者:

.portfolio-item img { ... }