如何在一行中显示多个 div 元素

Question

大家好，我想把三个元素横排显示。我试过下面的代码，但它没有正确地显示它们。

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

它的显示效果如下：

我希望它的显示效果像示例图片一样：

- Nomiluks

---

你的图片看起来像是排成一行的，有什么问题吗？ - Rory McCrossan

请再次阅读我的问题，我进行了一些修改，这样可以更好地解释。 - Nomiluks

请发布有效的HTML代码，以便社区可以使用它来重现问题。或者提供类似于JSFiddle的东西来演示问题。并尽量避免使用内联样式，这会使您的代码极难处理... 为什么使用CSS。 - T J

@TJ是正确的，我同意他的观点。 - user3423017

Answer 1

给内部div设置display属性为inline-block:

  display:inline-block;

更新：

你需要为包含jo will fix it的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>

- Milind Anantwar

---

调整宽度也要吗？ - PeterKA

请再次阅读我的问题，我做了一些修改，这样可以更好地解释它。 - Nomiluks

Answer 2

在子div中添加display: inline-block;。

设置子div的高度：

1. 可能性 1：为所有子div设置高度：height: 20px /* 或以%、em等为单位 */; 2. 可能性 2：为子div设置高度：height: inherit;，这将从父元素继承高度到子元素。

来自W3Schools：

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

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

- toesslab

Answer 3

要在一行中显示所有的<div>元素，你可以尝试以下代码：

display:'flex'

- Armer B.

Answer 4

如果您想要快速解决问题，可以使用另一个带有“clear:both;”属性的元素：

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

- Jai

Answer 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; ..." 的样式

- user3423017

Answer 6

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

section > div {
    display: table-cell;
    width: 33%;
    text-align: center;
    background-color:#f77f00; 
    text-align: center; 
    vertical-align: middle;
    margin:10%;
}
section {
    display: table;
    width: 100%;
    margin:1%;
}

<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="#000" face="verdana" size="4">JO willl fix it </font>
        </p>
    </div>
    <div>
        <img style="" src="http://i59.tinypic.com/b4ddtu.png" />
    </div>
</section>

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

- Nomiluks

Answer 7

body {
  margin: 0;
  padding: 0;
}

.container {
  margin: 25% 5%;
  display: inline-flex;
  column-gap: 10px;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.container .child {
  border: 0 solid #000;
  padding: 5px;
  width: 40%;
  text-align: center;
  background-color: #ff0012;
  color: #ffffff;
  border-radius: 5px;
}

<html>

<body>
  <div class="container">
    <div class="child">
      <p>Some text</p>
    </div>
    <div class="child">
      <p>Some more text</p>
    </div>
    <div class="child">
      <p>Much more text</p>
    </div>
  </div>
</body>

</html>

- tfk_Osaro