html - 如何内联显示图像

Question

我有一个包含三个图像的导航 div。每张图片都有一个绝对位于图片底部的标题元素。我试图在同一行上显示所有三个彼此相邻的图像，但图片显示为 block 。

HTML:

<div class = "nav">
    <div class = "container">

        <div class = "image">
            <img src = "img1"> 
        </div>
        <div class = "title">
            <p> text1 </p>
        </div>

    </div>

     <div class = "container">

        <div class = "image">
            <img src = "img2"> 
        </div>
        <div class = "title">
            <p> text2 </p>
        </div>

    </div>

     <div class = "container">

        <div class = "image">
            <img src = "img3"> 
        </div>
        <div class = "title">
            <p> text3 </p>
        </div>

    </div>
</div> 

CSS:

.nav {
    display: inline;
}

.container {
    position: relative;
    width: 100%;
}

.image img {
    width: 30%;
    height: 4.5in;
}

.title {
    width: 30%;
    position: absolute;
    bottom: 0; left: 0;
}

Answer 1

您需要先修复您的 HTML 代码。

是<div class = "title">而不是 <div class = "title>缺少每个标题末尾的 "。

然后将 float 添加到您的容器中，并将宽度设置为 30%。因为您希望图像的宽度为 30%。

.container {
    float:left;
    position: relative;
    width: 30%;
}

当你放置 3 个时间容器时，你要求 100% X 3 对齐，

还在你的 CSS 中创建一个带有 float 的图像类。

.image{
    float:left;
}

最后，将 CSS 中的 .image img 的宽度更改为 100%，这样它将占据允许的 30% 容器的 100% 位置。

    .image img {
    width: 100%;
    height: 4.5in;
    }