html - CSS:Div的位置

我正在使用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输出，但这不是一个选项。

最佳答案

您可以从前几个元素的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;
}

然后给position:absolute;一个.reply。你可能需要修改这些数字。
示例：http://jsfiddle.net/GLwfW/9/
编辑
基于@diodeus的评论
你可以尝试绝对定位——直到作者的名字变长，
这将迫使“回复”位于
通常在它的左边。
要做的一件事是detach来自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/