How can i Display div Elements in one row

Question

Hi everyone i want o display 3 elements in a row. I have tried the following code but it is not displaying them correctly.

    


        
                      

              相关标签:
       
      

Answer 1

add height to your second div which is not correctly displayed like
'<div id="${_id}" onclick="" style="height=40px;background-color:#f77f00; float:left; width:50%; ">'+ '<p style=""><font color="#fff" face="verdana" size="4">${name}</font></p>'+ '</div>'+

Add like style="height=40px;

Answer 2

Give display property inline-block for inner divs:

  display:inline-block;

Update:

you need to set the height for div that has jo will fix it as other to div have images in them:

Demo

Answer 3

Add display: inline-block; to the child divs.

Set the height of the child divs:

1. Possibility: Set the height for all the child divs: height: 20px /* or in %, em, etc */;
2. Possibility: Set the height for the child divs: height: inherit; which gives the height from the parent div to the children divs

From W3Schools:

The inherit keyword specifies that a property should inherit its value from its parent element.

The inherit keyword can be used for any CSS property, and on any HTML element.

Answer 4

If you want a quick fix then you can use another element with clear:both; property:

'</div> <br style="clear:both; height:0;" />';

Answer 5

Here i have written some code that might solve this issue (:

<section style="background-color:#f77f00; text-align: center; vertical-align: middle;">
<div>
    <img style=" " src="http://i58.tinypic.com/16c9ulk.png" />
</div>
<div>
    <p style=""><font color="#fff" face="verdana" size="4">JO willl fix it </font>
    </p>
</div>
<div>
    <img style="" src="http://i59.tinypic.com/b4ddtu.png" />
</div>
</section>

Demo