如何在一行中显示 div 元素答案

【问题标题】：How can i Display div Elements in one row如何在一行中显示 div 元素
【发布时间】：2014-05-22 07:01:03
【问题描述】：

大家好，我希望连续显示 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>

它是这样显示的

我想像示例图片一样创建它

【问题讨论】：

您的图像在我看来它们都排成一排。有什么问题？
请再次阅读我的问题，我做了一些更改，可以更好地解释它
请发布有效的 html 以供社区使用以重现问题。或者提供类似JSFiddle 的东西来证明问题。并尽量避免使用内联样式，这会使您的代码极难使用……Why Use Css
@TJ 是对的，我同意他的观点

标签： javascript jquery html css

【解决方案1】：

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

  display:inline-block;

更新：

您需要为具有jo will fix it 的 div 设置高度，因为其他 div 中包含图像：

Demo

【讨论】：

并调整宽度。对吗？
请再次阅读我的问题，我做了一些更改，可以更好地解释它

【解决方案2】：

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

设置子div的高度：

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

来自 W3Schools：

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

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

<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

【讨论】：

【解决方案5】：

将高度添加到第二个未正确显示的 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; ..."

【讨论】：

【解决方案6】：

要在一行中显示所有 <div> 元素，您可以尝试：

display:'flex'

【讨论】：