使用显示垂直对齐的图像：内联块未对齐

Question

图像在另一个上面显示，而不是在水平线上，不知道为什么。 只需要它们水平对齐.....

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

Answer 1

您需要为图像添加width属性，而不仅仅是图像容器。否则，图像将不会调整大小以适合其容器，并且它们将溢出它，导致它们重叠。示例：JSFiddle

将此添加到您的CSS：

.detail_images img {
    width: 203px;
}

您可以根据需要调整图像的宽度。