如何在html中的同一行显示图像

Question

我正在尝试学习一些 html，但我不确定我做错了什么。我有 3 张图像我想在同一条水平线上，比如 |图像 1 |图像 2 |图像 3 |。我使用的外部 div 容器有足够的空间来容纳所有 3 个图像。

我尝试过使用 inline-block、inline 和 float，但这些都不起作用。

这是我得到的：

     <div id="banner" style="overflow: hidden; display: inline-block;">
        <div class="" style="max-width: 20%; max-height: 20%;">
            <img src ="img1.jpg">
        </div>

        <div class="" style="max-width: 100%; max-height: 100%;">
            <img src ="img2.jpg">
        </div>

        <div class="" style="max-width: 20%; max-height: 20%;">
            <img src ="img3.jpg">
        </div>
    </div>

原文由 Feltie 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您需要将内部 div 设置为 inline-block，而不是外部 div。

   <div id="banner">
    <div class="inline-block">
        <img src ="img1.jpg">
    </div>

    <div class="inline-block">
        <img src ="img2.jpg">
    </div>

    <div class="inline-block">
        <img src ="img3.jpg">
    </div>
</div>

我删除了你所有的内联 css，因为这是不好的做法。您应该有一个单独的 css 文件，您可以在其中定义样式。我在这里使用“inline-block”作为类名，但可以随意命名。

在你的外部 css 文件中你会有这个，如果你遵守我的命名约定，

 .inline-block {
   display: inline-block;
}

此外，这是另一个演绎的工作小提琴，三个图像并排。 https://jsfiddle.net/3m33emfd/

横幅不需要设置为内联块，它是您的子 div 的外部容器。你实际上希望#banner 显示：块，所以我把它放在我的工作小提琴中。

原文由 Dan Zuzevich 发布，翻译遵循 CC BY-SA 4.0 许可协议