html - 如何在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>

Answer 1

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

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

此外，这是另一个演绎版的工作 fiddle ，并排显示三个图像。 https://jsfiddle.net/3m33emfd/

banner 不需要设置为 inline-block，它是子 div 的外部容器。你实际上希望 #banner 显示: block ，所以我把它放在我的工作 fiddle 中。