如何将 div 定位在容器 div 和内联的底部？

Question

我在容器 div 中有两个 div，我希望它们位于容器底部和左/右角。当我将容器相对定位并且内部 div 绝对底部：0 时，这些 div 中的文本会消失。下面是我目前所处的位置，内部 div 使用 float 左右放置，但垂直居中而不是底部。

CSS

    .container {
    margin-right: auto;
    margin-left: auto;
    width: 90%;
    position: relative;
}

#top {
    background-image: url(../header.jpg);
    -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
    background-repeat: no-repeat;    
  background-position: center; 
  min-height: 480px;
}

.title {  
    font-family: 'Lato', sans-serif;
    font-weight: 300;
    font-size: 84px;
  line-height: 92px;
  float: left;
}

p span {
    display: block;
    font-weight: 400;
}

.author {
    display: inline-block;
    float: right;
    bottom: 0;
}

li {
    list-style: none;
}

HTML

    <div class="container">

        <div class="title">

            <p>Howdy <span>Partner</span></p>

        </div>

        <div class="author">

            <ul>

                <li><img src="../portrait.png"></li>

                <li></li>

            </ul>

        </div>

    </div>

</section> <!-- Endof Header -->

Answer 1

你应该有：

.container {
    position: relative;
    height: 100px; /* This is neccesary! */
}

.title {
    position: absolute;
    bottom: 0;
    left: 0;
}

.author {
    position: absolute;
    bottom: 0;
    right: 0;
}

并记住 .title 和 .author 的宽度，或者将任何内容放入其中以查看 div。

检查：http://jsfiddle.net/hvfku99c/