使图像左右显示

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;          
}