如何在一行中显示div元素

Question

大家好我想要连续显示3个元素。我尝试了以下代码，但没有正确显示它们。

    <div id="mainDiv" style="background-color:#f77f00; width:90%; margin-right:5%; margin-left:5%; margin-bottom:1%; margin-top:1%;" >
        <div id="left" onclick="Deletefav(this)"  style="display: inline; width:20%; float:left; ">'+
            '<img style="display: inline;" src="" />
        </div>'+

        <div id="center" onclick=""  style=" width:30%;  display: inline;text-align: center; margin:10%;">
            <p style="display: inline;"><font color="#fff" face="verdana" size="4">testing</font></p>
        </div>

        <div id="right" onclick="Callfav(this)"  style="display: inline; width:20%; float:right;">
            <img style="display: inline;" src="" /> 
        </div>
    </div>

显示如下

我想像示例图片

一样创建它

Answer 1

为内部div提供显示属性inline-block：

  display:inline-block;

<强>更新

你需要设置具有jo will fix it的div的高度，而div需要设置图像：

<强> Demo

Answer 2

将display: inline-block;添加到子div。

设置子div的高度：

1. 可能性：设置所有子div的高度：height: 20px /* or in %, em, etc */;
2. 可能性：设置子div的高度：height: inherit;，它给出从父div到子div的高度

来自W3Schools：

  

inherit关键字指定属性应继承其值   来自其父元素。

     

inherit关键字可用于任何CSS属性和任何HTML   元件。

Answer 3

如果您想要快速修复，那么您可以使用具有clear:both;属性的其他元素：

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

Answer 4

为你的第二个div添加高度，如果没有正确显示 '<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>'+

添加 style =“height = 40px;

Answer 5

这里我写了一些可能解决这个问题的代码（：

<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