如何内嵌显示图像

Question

我有一个导航div有三个图像.每个图像都有一个绝对位于图片底部的标题元素.我试图在同一行上显示彼此相邻的所有三个图像,但图片显示为块.我是新手.非常感谢您的帮助!

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

Answer 2

您的图像已经设置为内联，问题是，它们的父图像没有设置为内联。你需要这个：

container { display: inline-block }

值得注意的是，您有一些可能并不真正需要的标记

    <div class = "title>
        <p> text3 </p>
    </div>

可以用这个代替：

    <h1 class="title">text3</h1>

或这个：

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

-剪断-

    <h1>text3</h1>