html - CSS: Div的位置

Question

我正在使用 wordpress 主题，它会自动生成评论的 html 输出。 HTML 输出如下:

Author says:
August 30, 2011 at 6:43 pm  (Edit)
The comment text...
Reply.

我需要改变元素的位置。例如，我想在一行中显示作者、日期/编辑和回复。 喜欢:

Author says:    August 30, 2011 at 6:43 pm  (Edit)  Reply
The comment text...

正如我上面所说，我不能改变 HTML 结构，所以我只需要用 CSS 改变元素的位置。但是我可以这样做。 我会感谢任何帮助。

这是生成的 html:

<div class="comment-body" id="div-comment-33">

        <div class="comment-author vcard">
            <img width="48" height="48" class="avatar avatar-48 photo" src="http://i55.tinypic.com/21buau9.jpg" alt="">     

            <cite class="fn">
                <a class="url" rel="external nofollow" href="#">Author</a>
            </cite> 
            <span class="says">says:</span>     

        </div>

        <div class="comment-meta commentmetadata">
            <a href="#comment-33">August 30, 2011 at 6:43 pm</a>&nbsp;&nbsp;
            <a title="Edit comment" href="#" class="comment-edit-link">(Edit)</a>       
        </div>

        <p>The comment text...</p>

        <div class="reply">Reply</div>
</div>

jsFiddle 链接:

http://jsfiddle.net/GLwfW/1/

附言。我知道我们可以通过在 wordpress 中添加自定义函数来更改 HTML 输出，但这不是一种选择。

Answer 1

您可以在前几个元素上使用 display:inline-block; 开始:

.comment-body{
    border:1px solid green;
    position:relative;
}

.comment-author, .comment-meta{
    display:inline-block;
}

.reply{
    position:absolute;
    top:34px;
    left:360px;
}

然后给 .reply 一个 position:absolute;。您可能需要摆弄这些数字。

示例: http://jsfiddle.net/GLwfW/9/

---

编辑

基于@Diodeus 的评论回复

You can try absolute positioning -- until the author's name is long, which will then force "reply" to be on top of the text that was normally to the left of it.

要做的一件事是从 DOM 中分离回复并重新插入它。所以

新 CSS

.comment-body{
    border:1px solid green;
    position:relative;
}

.comment-author, .comment-meta, .reply{
    display:inline-block;
}

一些JS

var a = $('div.reply').detach();

a.appendTo('.comment-meta');

修订示例: http://jsfiddle.net/GLwfW/10/