html - 使图像左右显示

Question

我是 CSS 新手，想知道如何让我的图像并排显示。我不想用float:left，而是display:inline-block。我试过了，但我无法让它工作。

这是jsfiddle。

Answer 1

您的图像都在单独的<div>标签内。<div>默认情况下，A看起来像display: block，因此您需要为您的comment1和comment2类做的就是使这些内联块。此外，由于您.MainBox .commentBox的设置为width: 0px，因此它下面的所有元素都不会并排排列。如果您希望图像彼此相邻，则需要删除该属性。

Answer 2

尝试这个：

使用以下 CSS：

.MainBox {
    margin:0px auto;
    border:1px solid #f00;
    width:1000px;
}  
.MainBox .commentBox {
    display:inline-block;
}
.MainBox .commentBox .comment1 {
    float:left;
}
.MainBox .commentBox .comment2 {
    float:left;          
}