How to arrange div elements on one line?

. div1 {display: inline; }
& lt; div class = "div1" & gt;
    & lt; img .... & gt;
  & lt; / div & gt;
  & lt; div class = "div1" & gt;
    & lt; img .... & gt;
  & lt; / div & gt;
  & lt; div class = "div1" & gt;
    & lt; img .... & gt;
  & lt; / div & gt;

Pictures are lined up. But what if, for example, a description needs to be made under the picture?

. div1 {display: inline; }
& lt; div class = "div1" & gt;
  & lt; img .... & gt;
  & lt; div class = "about" & gt; image1 & lt; / div & gt;
& lt; / div & gt;
& lt; div class = "div1" & gt;
  & lt; img .... & gt;
  & lt; div class = "about" & gt; image2 & lt; / div & gt;
& lt; / div & gt;
& lt; div class = "div1" & gt;
  & lt; img .... & gt;
  & lt; div class = "about" & gt; image3 & lt; / div & gt;
& lt; / div & gt;

Then div1 elements start on a new line again.

Answer 1, authority 100%

Simple

. div1 {display: inline-block;}

And this is how you can reduce the amount of code:

. about {
 display: inline-block;
}
.about img {
 display: block;
}
& lt; div id = "images" & gt;
  & lt; div class = "about" & gt;
  & lt; img src = "pic.png" & gt;
  image1
  & lt; / div & gt;
  & lt; div class = "about" & gt;
  & lt; img src = "pic.png" & gt;
  image2
  & lt; / div & gt;
  & lt; div class = "about" & gt;
  & lt; img src = "pic.png" & gt;
  image3
  & lt; / div & gt;
& lt; / div & gt;

Answer 2, authority 17%

Use display: inline-block or float: left on the .div1 selector
Learn more about aligning elements .

Answer 3, authority 17%

My advice is to use flex, here’s a sample code:

HTML file:

& lt; div class = "container" & gt;
  & lt; div id = "con1" & gt; & lt; / div & gt;
  & lt; div id = "con2" & gt; & lt; / div & gt;
  & lt; div id = "con3" & gt; & lt; / div & gt;
& lt; / div & gt;

CSS file:

. container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  border: 5px solid black;
  padding: 20px;
}
# con1 {
  width: 150px;
  border: 2px solid black;
  background-color: green;
  height: 150px;
  border-right: 0px;
}
# con2 {
  width: 100%;
  border: 2px solid black;
  background-color: yellow;
  height: 300px;
}
# con3 {
  width: 150px;
  border: 2px solid black;
  border-left: 0px;
  background-color: green;
  height: 150px;
}

I advise you to read

Answer 4

The point is that there is a block element inside. Try this:

& lt; span & gt;
  & lt; div & gt; 123 & lt; / div & gt;
& lt; / span & gt;
& lt; span & gt;
  & lt; div & gt; 123 & lt; / div & gt;
& lt; / span & gt;
& lt; span & gt;
  & lt; div & gt; 123 & lt; / div & gt;
& lt; / span & gt;

SPAN is an inline element, but a DIV is a block element. The result is everything in a column.

Remove DIVs everywhere – get the result in a string.