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/

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

1 个答案: