html - CSS:Div 的位置

标签 html css wordpress wordpress-theming

我正在使用 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 改变元素的位置。但是我不能这样做。
我会appriciate任何帮助。

这是生成的 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 输出,但这不是一个选项。

最佳答案

您可以通过添加“float:left”来更改元素的位置,但在这种情况下这不起作用,因为您需要在“评论文本”之前显示回复。 CSS 不能重新排列元素的顺序。

当像这样“画成一个 Angular 落”时,您始终可以使用 jQuery 在客户端重新编写 HTML。残酷但有时这是唯一的选择。

关于html - CSS:Div 的位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7729637/

相关文章:

php - 如何使用 .htaccess/Apache2 使用简单的 php 应用程序在子目录中配置 wordpress 应用程序?

html - 我在 div 表中做错了什么

java - 使用JSOUP获得somes类同名

html - 固定<Pre>的大小并在html中滚动

html - 图像旁边的多行文本 (CSS-HTML)

php - 摆脱 WooCommerce 我的帐户 - 订单页面中的订单状态

php - 是否可以通过 functions.php 文件将文本框挂接到 WordPress 主题中?

html - 他们如何使a:hover全背景色

javascript - 尝试使用Indeed API来基于输入字段检索Job时发生错误

javascript - Jquery .slideToggle() 在导航栏上不起作用?