Css Wordpress回复评论正文出现在元数据上方

我正在为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 -->

---

取消浮动

.comment author

类没有帮助，尽管取消浮动

.comment metadata

和

div.comment

确实有帮助，尽管这会显著改变设计，因为这些元素将左对齐。任何帮助都将不胜感激。

您是对的，因为这是一个浮动问题，但在错误的元素上。尝试取消浮动

。回复
。您可以使用
溢出：auto.comment body
类中添加code>，或者在每条评论的底部添加一个边距。
理解，我将重新措辞。谢谢，Emma<代码>溢出：自动完美地解决了它。
.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;
}