How to display images on same line in html

Question

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>

Answer 1

use display:inline-block;

    <div id="banner" style="overflow: hidden;justify-content:space-around;">
    <div class="" style="max-width: 20%;max-height: 20%;display: inline-block;">
        <img src="img1.jpg">
    </div>

    <div class="" style="max-width: 100%;max-height: 100%;display: inline-block;">
        <img src="img2.jpg">
    </div>

    <div class="" style="max-width: 20%;max-height: 20%;display: inline-block;">
        <img src="img3.jpg">
    </div>
    </div>

Answer 2

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.

Answer 3

give the following css

display: flex; justify-content:space-around;

<div id="banner" style="overflow: hidden; display: flex; justify-content:space-around;">
        <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 4

You have the images enclosed within div tags, which are block elements. You should instead apply the style directly to the images, and do away with the divs, like this:

<img style="max-width:20%" src="…">

Answer 5

.image-div{
  float:left;
  margin-right:10px;
  max-width: 20%;
  max-height: 20%;
}

<div id="banner" style="overflow: hidden; ">
  <div class="image-div" >
    <img src ="img1.jpg">
  </div>

  <div class="image-div" >
    <img src ="img2.jpg">
  </div>

  <div class="image-div" >
    <img src ="img3.jpg">
  </div>
  <div style="clear:left;"></div>
</div>