我是 CSS 新手,想知道如何让我的图像并排显示。我不想用float:left
,而是display:inline-block
。我试过了,但我无法让它工作。
这是jsfiddle。
您的图像都在单独的<div>
标签内。<div>
默认情况下,A看起来像display: block
,因此您需要为您的comment1
和comment2
类做的就是使这些内联块。此外,由于您.MainBox .commentBox
的设置为width: 0px
,因此它下面的所有元素都不会并排排列。如果您希望图像彼此相邻,则需要删除该属性。
尝试这个:
使用以下 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;
}