Изображения выровнены по вертикали с помощью дисплея: встроенный блок не выравнивается

Question

Изображения выровнены по вертикали с помощью дисплея: встроенный блок не выравнивается

0

Изображения отображаются один поверх другого, а не в горизонтальной линии, и не знаю, почему. Просто им нужно выровнять по горизонтали.....

HTML

<div id="detail_image_wrapper">
    <div class="detail_images">
        <img id="left_detail" src="images/LeftDetailImg.png" alt="Phone image">
    </div>

    <div class="detail_images">
        <img id="centre_detail" src="images/CentreDetailImg.png" alt="Phone image">
    </div>

    <div class="detail_images">
        <img id="right_detail" src="images/RightDetailImg.png" alt="Phone image">
    </div>
</div>

CSS

div.detail_images {
    width: 203px;
    vertical-align: top;
    display: inline-block;
}

user1782255 12 нояб. 2013, в 03:41

Источник

Теги:

html

css

1 ответ

Ещё вопросы

Sean Henderson · Answer 1 · 2013-11-11T23-02-00.000Z

Вам нужно добавить свойство width к изображениям, а не только к контейнеру изображения. В противном случае изображения не будут изменяться, чтобы вписаться в их контейнер, и они переполнят его, что приведет к их перекрытию. Пример: JSFiddle

Добавьте это в свой CSS:

.detail_images img {
    width: 203px;
}

Вы можете отрегулировать ширину изображений по мере необходимости.