如何在一行中显示div元素 [英] How can i Display div Elements in one row

问题描述

大家好，我想o连续显示3个元素.我尝试了以下代码，但显示不正确.

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

    <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>

它像这样显示

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

I want to create it like the sample image

推荐答案

为内部div赋予显示属性inline-block:

Give display property inline-block for inner divs:

  display:inline-block;

更新:

您需要为具有jo will fix it的div设置高度，以使div中包含图像:

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

演示

Demo

这篇关于如何在一行中显示div元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！