css - WordPress 对评论正文的回复显示在元数据上方

Question

我正在为 WordPress 使用自定义主题，但我遇到了评论格式问题。回复评论在评论元数据(用户名和日期)之前显示正文。这很奇怪，因为在 HTML 中，正文显然位于元数据之后。

以下是 Wordpress 生成的 HTML 代码:

<div class="comment-list">
    <div id="comment-4" class="comment even thread-even depth-1 parent">
        <article id="div-comment-4" class="comment-body">
            <footer class="comment-meta">
                <div class="comment-author vcard">
                    <b class="fn">John Seibert</b> <span class="says">says:</span>                  
                </div><!-- .comment-author -->
                <div class="comment-metadata">
                    <a href="http://howtolearnalanguagelikeaboss.com/introduction/#comment-4">
                        <time datetime="2015-12-08T01:40:19+00:00">December 8, 2015 at 1:40 am</time>
                    </a>
                    <span class="edit-link"><a class="comment-edit-link" href="http://howtolearnalanguagelikeaboss.com/wp-admin/comment.php?action=editcomment&#038;c=4">Edit</a></span>                    
                </div><!-- .comment-metadata -->
            </footer><!-- .comment-meta -->
            <div class="comment-content">
                <p>Hi Dave,</p>
                <p>Nice web site.</p>
                <p>Dad</p>
            </div><!-- .comment-content -->
            <div class="reply"><a rel='nofollow' class='comment-reply-link' href='http://howtolearnalanguagelikeaboss.com/introduction/?replytocom=4#respond' onclick='return addComment.moveForm( "div-comment-4", "4", "respond", "6" )' aria-label='Reply to John Seibert'>Reply</a></div>           
        </article><!-- .comment-body -->
        <div id="comment-7" class="comment odd alt depth-2">
            <article id="div-comment-7" class="comment-body">
                <footer class="comment-meta">
                    <div class="comment-author vcard">
                        <b class="fn">Dave Seibert</b> <span class="says">says:</span>                  
                    </div><!-- .comment-author -->
                    <div class="comment-metadata">
                        <a href="http://howtolearnalanguagelikeaboss.com/introduction/#comment-7">
                            <time datetime="2015-12-31T21:42:56+00:00"> December 31, 2015 at 9:42 pm                            </time>
                        </a>
                    </div><!-- .comment-metadata -->
                </footer><!-- .comment-meta -->
                <div class="comment-content">
                    <p>Thanks, Dad!</p>
                </div><!-- .comment-content -->
                <div class="reply"><a rel='nofollow' class='comment-reply-link' href='http://howtolearnalanguagelikeaboss.com/introduction/?replytocom=7#respond' onclick='return addComment.moveForm( "div-comment-7", "7", "respond", "6" )' aria-label='Reply to Dave Seibert'>Reply</a></div>           
            </article><!-- .comment-body -->
        </div><!-- #comment-## -->
    </div><!-- #comment-## -->
</div><!-- .comment-list -->

然而，这是用内容“谢谢，爸爸!”呈现的之前“戴夫说”和日期，如下所示:screenshot of metadata following content .

我意识到这可能是一个 float 问题，但我影响此部分的唯一 CSS 如下:

.comment-author {
  font-size: 1.7rem;
  line-height: 2.1rem;
  float: left;
}

.comment-metadata {
  font-size: 1.7rem;
  line-height: 2.1rem;
  float: right;
  font-weight: 300;
  font-style: italic;
}

div.comment {
  padding-bottom: 4em;
}

h2.comments-title {
  border-style: solid;
  border-width: 1px 0 0 0;
  margin-top: 2em;
  padding-top: .5em;
  padding-bottom: 1em;
}

div.reply {
  font-size: 1.7rem;
  line-height: 2.1rem;
  float: right;
  border-style: solid;
  padding: .1em .3em .1em .3em;
  border-width: .1em;
}

取消 float .comment-author 类没有帮助，尽管取消 float .comment-metadata 和 div.comment 确实有帮助，尽管这会显着改变设计，从那时起这些元素将左对齐。任何帮助将不胜感激。

Answer 1

你是对的，这是一个 float 问题，但在错误的元素上。尝试取消 float .reply。您可以在 .comment-body 类中使用 overflow: auto; 来解决这个问题，或者在每个评论的底部添加边距。