将图像并排显示

Question

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

Here是jsfiddle。

Answer 1

你的照片每个都有独立的<div>标签。默认情况下，<div>将看起来像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;   
}