CSS在父元素底部显示元素

Question

我有一个div，其中包含宽度为100％且指定高度的背景图片。

我有一个搜索功能区，我希望它与图像的底部对齐。我知道我可以用绝对定位做到这一点，但我尽量避免绝对的地方。

这里是一名掠夺者：http://plnkr.co/edit/ur1Mu7nYifRTwb7dTEej?p=preview

我试图像这样模仿：https://www.airbnb.com/

HTML：

<div class="bk-image">
    <section class="ribbon">
      <input type="text" placeholder="Name a city" class="city-name"/>
    </section>
  </div>

CSS：

.bk-image {
  background-image: url(http://gratisography.com/pictures/219_1.jpg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  height: 600px;
  position: relative;
}

.ribbon {
  height: 90px;
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.6);
    text-align: center;
}

.city-name {
  width: 200px;
  margin-top: 30px;
  padding: 10px;
}

Answer 1

您需要使用position和bottom：

.ribbon {
    height: 90px;
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.6);
    text-align: center;
    /* Add the following */
    bottom: 0;
    position: absolute;
    width: 100%;
}

预览

Answer 2

  

我有一个div，其中包含宽度为100％且指定高度的背景图片。

由于所有高度都已知， 在此特定情况下 ，您可以将padding-top添加到＆＃34;功能区＆​​＃34; 510像素的510px（600px - 90px）或* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .bk-image { background-image: url(http://gratisography.com/pictures/219_1.jpg); background-repeat: no-repeat; background-size: 100% 100%; height: 600px; position: relative; overflow: auto; } .ribbon { margin-top: 510px; height: 90px; background: none repeat scroll 0 0 rgba(0, 0, 0, 0.6); text-align: center; } .city-name { width: 200px; margin-top: 30px; padding: 10px; }的div到图像div。

保证金榜首

＆＃13;

＆＃13;

<div class="bk-image">
    <section class="ribbon">
        <input type="text" placeholder="Name a city" class="city-name" />
    </section>
</div>

＆＃13;

UpdatePageContent

＆＃13;

＆＃13;

＆＃13;

Jsfiddle Demo

Answer 3

如果您不想使用绝对定位，并且父母的身高可能会随着时间的推移而发生变化，您可以使用flexbox来实现此目标。将父元素的display属性设置为flex，将align-items属性设置为flex-end。您还需要为子元素提供100％的width。不要忘记prefix the flexbox properties as necessary

*{box-sizing:border-box;color:#000;font:arial;margin:0;padding:0;}
.bk-image{
  align-items:flex-end;
  background:url(http://gratisography.com/pictures/219_1.jpg) no-repeat;
  background-size:cover;
  display:flex;
  height:600px;
}
.ribbon{
  background:rgba(0,0,0,.6);
  height:90px;
  padding:30px;
  width:100%;
}
.city-name{
  background:rgba(255,255,255,.95);
  border:0;
  display:block;
  height:30px;
  line-height:30px;
  margin:0 auto;
  padding:0 10px;
  width:100%;
  max-width:200px;
}

<div class="bk-image">
  <section class="ribbon">
    <input type="text" placeholder="Name a city" class="city-name">
  </section>
</div>

或者，正如评论中指出的Paulie_D一样，如果将flex-direction设置为column，则无需设置子元素的宽度。

*{box-sizing:border-box;color:#000;font:arial;margin:0;padding:0;}
.bk-image{
  background:url(http://gratisography.com/pictures/219_1.jpg) no-repeat;
  background-size:cover;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  height:600px;
}
.ribbon{
  background:rgba(0,0,0,.6);
  height:90px;
  padding:30px;
}
.city-name{
  background:rgba(255,255,255,.95);
  border:0;
  display:block;
  height:30px;
  line-height:30px;
  margin:0 auto;
  padding:0 10px;
  width:100%;
  max-width:200px;
}

<div class="bk-image">
  <section class="ribbon">
    <input type="text" placeholder="Name a city" class="city-name">
  </section>
</div>