javascript - 如何在一行中显示 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 的 div 设置高度，因为其他 div 中有图像:

<div
  id="${id}"
  style="
    background-color: #f77f00;
    width: 90%;
    margin-right: 5%;
    margin-left: 5%;
    margin-bottom: 1%;
    margin-top: 1%;
  "
>
  <div
    id="${_id}"
    onclick="Deletefav(this)"
    style="background-color: #f77f00; float: left; width: 20%; display: inline-block"
  >
    <img style="" src="${del_image}" /> <font color="#fff" face="verdana" size="1">delete</font>
  </div>

  <div
    id="${_id}"
    onclick=""
    style="background-color: #f77f00; float: left; width: 50%; display: inline-block; height: 25px"
  >
    <font color="#fff" face="verdana" size="4">${name}</font>
  </div>

  <div
    id="${_id}"
    onclick="Callfav(this)"
    style="background-color: #f77f00; float: left; width: 20%; display: inline-block"
  >
    <img style="" src="${call_image}" /><font color="#fff" face="verdana" size="1">call</font>
  </div>
</div>