Div 不会在同一行向左浮动答案

【问题标题】：Div wont float to the left in the same lineDiv 不会在同一行向左浮动
【发布时间】：2017-10-30 16:03:06
【问题描述】：

我正在制作一个包含三个元素的页脚，一个 h3 和两个 div，所有元素都以边距百分比向右浮动。

问题是第三个元素（div2）在第一个 div 下方而不是向左浮动。

这是我的代码，我知道内联样式不是个好主意。

<div class="container" style="width:100%; height:70px; position:relative; float:left; padding:2%;">
  <h3 style="float:left; position:relative; margin-right:15%; top:50%; transform:translateY(-50%); ">Contact our experts</h3>
  <div class="telcontainer" style="margin-right:15%; width:auto; height:32px; position:relative; top:50%; transform:translateY(-50%); overflow:hidden; ">
    <img src="https://images.petsmartassets.com/is/image/PetSmart/icon-experts-call?$GN1201$" style="width:32px; height:32px; position:relative; float:left;">
    <h3 style="position:relative; float:left; margin-left:1%;">694003903</h3>
  </div>
  <div class="mailcontainer" style=" width:auto; height:32px; position:relative; top:50%; transform:translateY(-50%); overflow:hidden; ">
    <img src="https://images.petsmartassets.com/is/image/PetSmart/icon-experts-call?$GN1201$" style="width:32px; height:32px; position:relative; float:left;">
    <h3 style="position:relative; float:left; margin-left:1%;">Mail Us</h3>
  </div>
</div>

【问题讨论】：

标签： html text floating

【解决方案1】：

如果要对齐行或列中的项目，请尝试使用display: flex。会省去很多麻烦 https://css-tricks.com/snippets/css/a-guide-to-flexbox/

<div class="container" style="width:100%; padding:2%; display: flex; align-items: center; flex-direction: column">
  <h3 style="float:left;">Contact our experts</h3>
  <div class="telcontainer" style="width:auto; position:relative; display: flex">
       <img src="https://images.petsmartassets.com/is/image/PetSmart/icon-experts-call?$GN1201$" style="width:32px; height:32px; position:relative; float:left;">
       <h3>694003903</h3>
     </div>
     <div class="mailcontainer" style=" width:auto; position:relative; display: flex">
       <img src="https://images.petsmartassets.com/is/image/PetSmart/icon-experts-call?$GN1201$" style="width:32px; height:32px; position:relative;">
       <h3>Mail Us</h3>
    </div>
  </div>

【讨论】：

这个看起来很简单，我去看看。
现在我该怎么做才能垂直对齐两个 div？
694003903 和 Mail Us div？
是的，我将“联系我们”垂直居中，顶部：50%；变换：translateY（-50%）；但这对两个 div 都不起作用。
不是那样抱歉，我希望所有三个元素都垂直居中在同一行，与“联系我们”在同一行。感谢您的帮助，我是新手

【解决方案2】：

你有 position:reltive 而不是 position:relative。如果您更正它，这会改变什么吗？

【讨论】：

感谢您的提醒，但它没有改变任何东西:(