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

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

我尝试过使用内联块,内联和浮动,但这些都不起作用.

这是我得到的：

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

解决方法

您需要将内部div设置为内联块,而不是外部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/

banner不需要设置为内联块,它是您孩子div的外部容器.你真的希望#banner显示：阻止,所以我把它放在我的工作小提琴中.

原文地址：https://www.jb51.cc/html/228706.html