How to arrange div elements in one line?

.div1 { display: inline; } <div class="div1"> <img .... > </div> <div class="div1"> <img .... > </div> <div class="div1"> <img .... > </div>

Pictures line up. But what if, for example, under the picture you need to make a description?

 .div1 { display: inline; } <div class="div1"> <img .... > <div class="about"> image1 </div> </div> <div class="div1"> <img .... > <div class="about"> image2 </div> </div> <div class="div1"> <img .... > <div class="about"> image3 </div> </div>

That div1 elements again begin with a new line. how to be?

  • <br /> That won't do?)) Well, or try a table. - k0mar
  • <br/> not the same thing, the elements are arranged in a column. I would like to solve this without tables)) - or_die

4 answers 4

Simply

 .div1 {display:inline-block;}

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

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

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

    • Please try to publish detailed answers containing a specific example of the minimum solution, supplementing them with a link to the source. Answers –references (as well as comments) do not add knowledge to the Runet. - Nicolas Chabanovsky ♦

    I advise you to use flex, here is an example code:

    HTML file:

     <div class="container"> <div id="con1"></div> <div id="con2"></div> <div id="con3"></div> </div>

    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

      The thing is that inside - a block element. Try this:

       <span> <div>123</div> </span> <span> <div>123</div> </span> <span> <div>123</div> </span>

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

      Remove DIV everywhere - get the result in a string.

      In order to get what you want - you can specify not display: inline, but display: inline-block, or do it through tables (not in tags, but in styles — for example, display: table)