交错图像和评论的问题

Question

我在放置图片和评论方面遇到了问题。它们以交错的方式放置。我希望它们在一条直线水平线上彼此相邻放置。您可以在下面的图片中看到问题。

Live Demo

我尝试添加此代码：

display:inline-block;

仍然无法正常工作。

Answer 1

Fiddle

使用以下代码更改您的css代码...

.CommentStyle {
    border: 2px solid black;
    border-radius: 4px;
    margin-bottom: 10px;
    float: left;
    margin-right: 20px;
    width: 220px;
    height: 30px;
}

.CommentImage {
    height: 50px;
    width: 50px;
    display:block;
}

Answer 2

将此添加到.CommentStyle：

width: 500px;
display:inline-block;    
vertical-align: middle;

并将其添加到.CommentImage：

vertical-align: middle;

Fiddle

说明：

div是一个块元素，这意味着它取整个宽度，除非受宽度css属性的限制。点击此处了解详情：http://www.impressivewebs.com/difference-block-inline-css/