评论正文的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 -->

但这是用“谢谢，爸爸！”的内容呈现的。出现在"Dave“和日期之前，如下图所示：以下内容的元数据屏幕截图。

我意识到这可能是一个浮动问题，但我唯一影响本节的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;
}

不浮动.comment-author类没有帮助，尽管不浮动.comment-metadata和div.comment确实有帮助，尽管这在很大程度上改变了设计，因为那时这些元素将左对齐。任何帮助都将不胜感激。

Answer 1

你是对的，这是一个浮动的问题，但在错误的因素。试试不浮动的.reply。您可以使用overflow: auto;在.comment-body类上修复这个问题，或者在每个注释的底部添加一个边距。