Сделайте изображение, отображающее сторону сбоку

Question

Я новичок в CSS и задавался вопросом, как сделать мои изображения отображаемыми бок о бок. Я не хочу использовать float:left, а скорее display:inline-block. Я попробовал, но я не мог заставить его работать.

Here является jsfiddle.

Answer 1

Ваши изображения в пределах отдельных тегов <div>. A <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;   
}