我正在尝试学习一些
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显示：阻止,所以我把它放在我的工作小提琴中.
