html - 将 div 的内容推到右边

Question

我有一个评论区，用户可以评论和回复评论。我想显示评论及其回复。问题是回复没有与父评论正确对齐。

JSFiddle

CSS

.alignleft {
    float: left;
}
.alignright {
    float: right;
}
.comment-icon {
    padding-right: 0px;
    padding-left: 0px;
    width: 60px;
    margin-bottom: 5px;
}

当前结果:

.

这就是我想要的。

Answer 1

我们来看看更新后的 Fiddle。 Updated JsFiddle

<div class="row replies">

                    <div class="col-sm-10 reply-area pull-right">
                        <p class="alignleft">Peter &bull; 2014-12-12</p>
                        <p class="alignright">
                            <span class="badge votes">4</span><a class="comment-vote-up" href="#"><span data-count="1" class="glyphicon glyphicon-thumbs-up up"></span></a></span>
            <a class="comment-vote-down" href="#"><span class="glyphicon glyphicon-thumbs-down"></span></a></p>
                        <hr style="clear: both">
                        he'd
                    </div>
                <div class="col-sm-2 comment-icon pull-right">
                        <img src="https://cdn3.iconfinder.com/data/icons/ultimate-social/150/34_google_plus-512.png" alt="" class="img-circle"  width="60" height="60"/>
                    </div>
                </div>