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

概述我正在尝试学习一些 HTML,我不确定我做错了什么.我有3张想要在同一水平线上的图像,如| img 1 | img 2 | img 3 |.我使用的外部div容器有足够的空间来容纳所有3个图像. 我尝试过使用内联块,内联和浮动,但这些都不起作用. 这是我得到的： <div id="banner" style="overflow: hidden; display: inline-block;"> 我正在尝试学习一些 HTML,我不确定我做错了什么.我有3张想要在同一水平线上的图像,如| img 1 | img 2 | img 3 |.我使用的外部div容器有足够的空间来容纳所有3个图像.

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

这是我得到的：

<div ID="banner" >        <div  >            <img src ="img1.jpg">        </div>        <div  >            <img src ="img2.jpg">        </div>        <div  >            <img src ="img3.jpg">        </div>    </div>

解决方法 您需要将内部div设置为内联块,而不是外部div.

<div ID="banner">    <div >        <img src ="img1.jpg">    </div>    <div >        <img src ="img2.jpg">    </div>    <div >        <img src ="img3.jpg">    </div></div>

我删除了你所有的内联CSS,因为这只是不好的做法.您应该有一个单独的CSS文件来定义样式.我在这里使用“inline-block”作为类名,但无论你想要什么,都可以命名.

在你的外部CSS文件中你会有这个,如果你保留我的命名约定,

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

此外,继承人是另一个引渡的工作小提琴,三个图像并排.
https://jsfiddle.net/3m33emfd/

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

总结

以上是内存溢出为你收集整理的如何在html中的同一行显示图像全部内容，希望文章能够帮你解决如何在html中的同一行显示图像所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。