My HTML code:

        <div style="background-color:rgb(81, 205, 50); display:inline-table; width:700px; height:150px; border: 2px solid black; padding: 2px;">
              <img src="../rail_logo.png" width="150" height="150" style="margin-left: 20px; display:table-cell; border: 1px solid black;">
              <img src="../indian-railways.jpg" width="150" height="150" style="border: 1px solid black; display:table-cell;">
              <img src="../pm-railway.jpg" width="150" height="150" style="border: 1px solid black; display:table-cell;">
              <div width="150" height="150" style="border: 1px solid black; display:table-cell;"></div> <!--From here on, the divs appear in the next line (one below the other). Why?-->
              <div width="150" height="150" style="border: 1px solid black; display:table-cell;"></div>
        </div>

Upon executing the above code, all the <img> elements appear in the same line except for the last <div> which appears in the next line.

My output:

The divs should appear in the positions shown by the red highlighter

How do I fix this?

CodePudding user response：

You can use flexbox to get the layout like you want. For example:

.wrapper {
  width: 700px;
  padding: 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  background-color: green;
}

.img-box,
.hr-box {
  display: block;
  width: 120px;
  height: 120px;
  background-color: gray;
}

.hr-box {
  background-color: blue;
  height: 55px;
}

.hr-box:first-child {
  margin-bottom: 10px;
}

<div >
  <img >
  <img >
  <img >
  <div >
    <div ></div>
    <div ></div>
  </div>
</div>

CodePudding user response：

You can put 2 smaller photos inside the div with "inline-block" display.

Or you can use the masonry plugin.