html - 当段落只有几个单词(少于整行)时显示格式不正确

Question

我有一个用于显示评论的 html 页面。当评论超过一行时一切正常。当评论少于一行时，我遇到了格式问题。请参阅下面 jsfiddle 中的示例以了解。

JSFIDDLE:http://jsfiddle.net/ajNJf/

我有来自 Johnny、Mike、Stevie 和 Michael 的 4 条评论。 Stevie(第三个)的评论只有几句话。这会导致我的格式中断。

知道如何安排我的 CSS 来解决这个问题吗？

代码如下:

            <h3>Comments <span class="comments-amount">(89)</span></h3>

            <div class="comments-sec">

                <ol class="commentlist">

                    <li>
                        <div class="comments">
                            <div class="avatar"><img src="http://www.gravatar.com/avatar/00000000000000000000000000000000?d=mm&s=50" alt="" border="0" /> </div>
                            <div class="comment-des">
                            <div class="comment-by"><strong>Johnny</strong><span class="reply"><span style="color:#aaa">/ </span><a href="#">Reply</a></span> <span class="date">June 1, 2012</span></div>
                                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
                            </div>
                        </div>
                    </li>

                    <li>
                        <div class="comments">
                            <div class="avatar"><img src="http://www.gravatar.com/avatar/00000000000000000000000000000000?d=mm&s=50" alt="" border="0" /> </div>
                            <div class="comment-des">
                            <div class="comment-by"><strong>Mike</strong><span class="reply"><span style="color:#aaa">/ </span><a href="#">Reply</a></span> <span class="date">June 1, 2012</span></div>
                                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
                            </div>
                            </div>
                    </li>

                    <li>
                        <div class="comments">
                            <div class="avatar"><img src="http://www.gravatar.com/avatar/00000000000000000000000000000000?d=mm&s=50" alt="" border="0" /> </div>
                            <div class="comment-des">
                            <div class="comment-by"><strong>Stevie</strong><span class="reply"><span style="color:#aaa">/ </span><a href="#">Reply</a></span> <span class="date">June 1, 2012</span></div>
                                <p>Lorem ipsum dolor sit amet.</p>
                            </div>
                            </div>
                    </li>

                    <li>
                        <div class="comments">
                            <div class="avatar"><img src="http://www.gravatar.com/avatar/00000000000000000000000000000000?d=mm&s=50" alt="" border="0" /> </div>
                            <div class="comment-des">
                            <div class="comment-by"><strong>Michael</strong><span class="reply"><span style="color:#aaa">/ </span><a href="#">Reply</a></span> <span class="date">June 1, 2012</span></div>
                                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
                            </div>
                        </div>
                    </li>

                    </ol>

            </div>

还有CSS

.comments-sec {
    float:left;
width:100%;
line-height: 20px;
}  

ol.commentlist {
float:left; 
width:100%;
margin: 0;
}

ol.commentlist li {
float:left;
border-top: 1px solid #e7e7e7;
padding: 25px 15px 20px 15px;
}

ol.commentlist li:first-child {
border:none;
padding: 25px 15px 0px 15px;
}

ol.commentlist li {list-style: none;}

ol li ol.childlist{
float:right;
width:89%;
margin:0px;
}

ol.commentlist li ol.childlist li:first-child {
border-top: 1px solid #e9e9e9;
padding: 25px 0 0 0;
font-size: 12px;
}

ol.commentlist li ol.childlist li {
border-top: 1px solid #e9e9e9;
margin:25px 0 15px 0;
font-size: 12px;
}

.comments {
float:left;
width:100%;
}

.comments-amount {color: #888;}

ol li ol.childlist .comment-des {
float:right; 
width:89%;
}

.avatar {float:left}

.comment-des{
float:right;
width:90%;
}

.comment-des strong {
float:left;
padding-right:5px;
font-size:12px;
} 
.comment-des span {
float:left;
color:#888;
}

.comment-by {
float:left;
width:100%;
padding-bottom:8px;
padding-top:5px;
color: #000;
}

.ie7 .comment-by span.reply span {display: none;}

.comment-by span.reply {
color:#888; 
float:right;    display: inline;
}

.comment-by span.reply a {
float: right;
height: 17px;
margin-left: 5px;
font-weight: normal;
float:right;

}

.comment-by span.date {
color:#888;
padding-right: 7px; 
float: right;
}

.ie7 .comment-by .date {display: none;}

谢谢。

Answer 1

从后面移除 float

ol.commentlist li {
  border-top: 1px solid #E7E7E7;
  float: left; //remove it
  padding: 25px 15px 20px; //change padding right 1% left 1%
}

添加宽度 98% 和适当的填充。你完成了

ol.commentlist li {
  width: 98%;
}