Question

这应该是我正在构建的Twitter提要，类src-twitter基本上是海报的时间戳和用户名，它应该在

的右下角，但是结果就在报价的正中间。

<div class="feed-bottom">
                <div class="post1">
                    <p>
                        "You have brains in your head. You have feet in your shoes. You can steer yourself in any direction you choose. You're on your own, and you know what you know. And you are the guy who'll decide where to go." - Dr. Suess
                    </p>
                    <p class="src-twitter">
                        @username 5:55pm September 20, 2014
                    </p>
                </div>
            </div>

CSS：

   .post1{
        position: relative;
    }

    .src-twitter {
        color:#dfdfdf;
        font-size: 12px;
        position: absolute;
        bottom: 0;
        right: 0;
    }

Answer 1

似乎无需使用position，只需text-align就可以了解

更新了CSS：

.src-twitter {
    color:#dfdfdf;
    font-size: 12px;        
    text-align:right;
}

Fiddle Demo

Answer 2

请检查jsFiddle。时间戳现在出现在推文的右下角。这是我添加的新CSS：

.src-twitter {
        color:#dfdfdf;
        font-size: 12px;
        float: right;
        margin-top: 0px;
    }

Answer 3

我创建了一个仍然使用绝对定位的fiddle。

CSS：

* {
    margin: 0;
    padding: 0;
}   
.post1{
    position: relative;
    padding: 16px;
}
.src-twitter {
    color:#dfdfdf;
    font-size: 12px;
    position: absolute;
    bottom: -16px;
    right: 16px;
}

HTML：

<div class="feed-bottom">
 <div class="post1">
  <p>"You have brains in your head. You have feet in your shoes. You can steer yourself in any direction you choose. You're on your own, and you know what you know. And you are the guy who'll decide where to go." - Dr. Suess</p>
  <p class="src-twitter">@username 5:55pm September 20, 2014</p>
 </div>
</div>

我在HTML中添加了一个简单的重置功能，因此您可以更好地控制边距和范围。填充，因为这也会影响元素的位置（对齐）。然后我再添加填充，然后使用相同的单位将作者姓名定位为负底部（您没有这样做，这就是为什么它位于主段落中间的原因之一。）

Answer 4

<div class="feed-bottom">
                <div class="post1">
                    <p>
                        "You have brains in your head. You have feet in your shoes. You can steer yourself in any direction you choose. You're on your own, and you know what you know. And you are the guy who'll decide where to go." - Dr. Suess
                    </p>
                    <p> &nbsp; </p>
                    <p class="src-twitter">
                        @username 5:55pm September 20, 2014
                    </p>
                </div>
            </div>

位置绝对不会扩展post1的高度...简单的解决方案是添加一个空的空间。或者，您可以指定post1的高度。

无法在左下角放置元素

4 个答案: