html - 使用 display:inline-block 垂直对齐的图像未对齐

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

You need to add a width property to the images, not just the image container. Otherwise the images will not resize to fit into their container and they will overflow it, causing them to overlap. Example: JSFiddle

Add this to your CSS:

.detail_images img {
    width: 203px;
}

You can adjust the width of the images as needed.