如何在html中以同一行显示图像 [英] How to display images on same line in html

问题描述

我试图学习一些html，我不确定我做错了什么。我有3个图像，我想要在像| |这样的水平线上img 1 | img 2 | img 3 |。外部div容器im使用有足够的空间来适应所有3个图像。

我试过使用内联块，内联和浮动，但这些都不起作用。 / p>

以下是我得到的：

 < div id = bannerstyle =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设置为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; 
} 
  

此外，还有另一个演绎的小提琴，三幅图像并排排列。
https://jsfiddle.net/3m33emfd/

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

I'm trying to learn some html and I'm not sure what I'm doing wrong. I have 3 images I want to have in the same horizontal line like | img 1 | img 2 | img 3 |. The outer div container im using has enough space to fit all 3 images.

I've tried using inline-block, inline and float but those don't work.

Here is what I got:

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

解决方案

You need to set the inside divs to inline-block, not the outside one.

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

I removed all of your inline css because it is just bad practice. You should have a separate css file where you define the styles. I used "inline-block" as a class name here, but name it whatever you want.

In your external css file you would have this, if you kept my naming convention,

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

Also, heres a working fiddle of another rendition, three images side to side. https://jsfiddle.net/3m33emfd/

banner does NOT need to be set to inline-block, it is an outside container for your child divs. You would actually want #banner to be display: block, so I put that in my working fiddle.

这篇关于如何在html中以同一行显示图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！