如何内联显示图像答案

【问题标题】：How to display images inline如何内联显示图像
【发布时间】：2020-01-27 19:18:42
【问题描述】：

我有一个包含三个图像的导航 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;
}

【问题讨论】：

试试display: inline-block;。
...一定要支持IE7吗？
CSS 图片库示例：w3schools.com/css/css_image_gallery.asp
这个问题应该是询问如何显示<div> 的内联，而不是<img>，因此对于搜索此特定解决方案的任何人都没有帮助。

标签： html positioning css-position css

【解决方案1】：

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

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

然后将浮动添加到您的容器中并设置 30% 的宽度。因为你希望你的图片是正确的 30% 宽度。

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

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

还可以在 CSS 中创建一个带有浮点数的图像类。

.image{
    float:left;
}

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

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

【讨论】：

【解决方案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;
}

-snip-

    <h1>text3</h1>

【讨论】：