how to dispaly div element side by side

Question

div element is block element and default display property is block , to display it in line , inline-block property can be used.

 <!DOCTYPE html> <html> <head> <title>Pictures</title> <style type="text/css"> .row { height: 50px; width: 50px; } .row1 { padding-bottom: 12px; display: inline-block; float: left; padding-right: 14px; } .row2 { display: inline-block; } } #img1 { max-width: 50%; max-height: 20%; } </style> <script type="text/javascript"> </script> </head> <body> <div class="content"> <div class="row"> <div class="row1"> <!--img height="50px" width="50px" src="images/image1.jpg"--> hello </div> <div class="row2"> Beutiful picture clicked by photographer </div> </div> </div> </body> </html>

I don't understand why these 2 divs are not getting display side by side , i am using inline-block but still no help.

Answer 1

这很容易..因为您要应用属性“ width”。

Answer 2

It is because the .row has width so less such that it can't accomodate both div. Try this it will make both parallel.

.row {
  height: 50px;
  width: 1000px;
}

how to dispaly div element side by side

Question

1 answers

solution1
0 2019-12-01 10:27:02

solution2
0 2019-12-01 10:29:10

how to dispaly div element side by side

Question

1 answers

solution1 0 2019-12-01 10:27:02

solution2 0 2019-12-01 10:29:10

solution1
0 2019-12-01 10:27:02

solution2
0 2019-12-01 10:29:10